vue.js——学习计划表

1)准备工作

①打开D:\vue\chapter02\ learning_schedule 目录,找到 index.html 文件。

在文件中引 入BootStrap 样式文件,具体代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

        上述代码中,第6行代码引入Bootstrap的CSS文件,引用后即可使用Bootstrap快速 开发响应式网页,使用全局CSS样式美化标签。

②修改src\App.vue文件中的默认内容,具体如图所示:

至此,“学习计划表”案例准备工作已完成。

2)渲染表格区域数据

        接下来正式进入“学习计划表”案例的开发。在App组件中编写表格区域的页面结构和样式,并在页面上渲染表格数据,具体实现步骤如下。

① 在<script setup>标签中定义渲染表格所需的数据,具体代码如下

<script setup>import {ref} from 'vue'const list =ref([{id:'1',subject:'Vue.js前端实战开发',content:'学习指令,例如v-if、v-for、v-model等',place:'自习室',status:false,},])
</script>

        上述代码中,list数组表示渲染表格区域所需的数据,id属性表示序号,subject属性表示学习科目,content属性表示学习内容,place属性表示学习地点,status属性表示学习计划的完成状态,若属性值为false,表示“未完成”,若属性值为true表示“已完成”。

② 根据Bootstrap文档找到Tables,根据实际需要合适的样式,本案例中表格的结构样式具体如下。

<template>
<table class="table table-striped table-hover table-bordered"><thead><tr><th scope="col">序号</th><th scope="col">学习科目</th><th scope="col">学习内容</th><th scope="col">学习地点</th><th scope="col">完成状态</th><th scope="col">操作</th></tr></thead>
</table>
</template>

③ 接下来通过v-for指令循环渲染表格行的数据,代码如下:

<tbody><tr v-for="item in list" :key="item.id"><td>{{item.id}}</td><td>{{item.subject}}</td><td>{{item.content}}</td><td>{{item.place}}</td><td><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="'cd' + item.id" v-model="item.status" /><label class="form-check-label" for="'cd' + item.id" v-if="item.status">已完成</label><label class="form-check-label" for="'cd' + item.id" v-else>未完成</label></div></td></tr>
</tbody>

      第2~15行代码通过v-for指令渲染表格行,将list数组中的数据渲染到 页面上,每项必须提供一个唯一key值;第3~6行代码将列表项中序号、学习科目、学习内容、学习地点通过Mustache语法渲染到页面上;第7~13行代码将表格行渲染为 switch 开关效果,其中,第8行代码将标签渲染为开关的效果,通过v-model指令 绑定绑定data中的list数组中每个对象的status属性,第10~11行代码通过v-if、v-else 条件渲染指令根据status属性的属性值渲染“已完成”或“未完成”的标签。

3) 实现学习计划的删除功能

  在单击表格行最后一列“删除”时,可以对整行的学习计划进行删除操作。在实现该功能时,在单击“删除”时,传递该行数据所对应的id属性,通过调用数组中的 filter()方法实现数据的过滤。在删除学习计划时,如果完成状态为“未完成”时禁止删 除,完成状态为“已删除”时该学习计划可以进行删除操作。实现学习计划删除功能的 具体步骤如下。

① 添加标签、单击事件,具体代码如下:
<a href="javascript:;" @click="remove(item.id, item.status)">删除</a>
② 在<script setup>标签中编写remove()方法,对学习计划完成状态的判断,具体代码如下。
let remove=(id,status) =>{if(status) {list.value=list.value.filter(item=>item.id !== id)}else{alert('请完成该学习计划后再进行删除操作!')}}

至此,学习计划表的删除功能已实现。

4)实现学习计划的添加功能

该功能通过表单来进行实现,在单击“添加”按钮时实现表单中所有信息的提交, 进行添加学习计划的操作。实现学习计划的添加功能具体实现步骤如下。

① 首先在<script setup>标签中定义页面所需的数据,具体代码如下

let subject=ref('')let content=ref('')let nextId=ref('')let selectedOption=ref('自习室')let options = ref([{ placeCode: 0, place: '自习室'},{ placeCode: 1, place: '图书馆'},{ placeCode: 2, place: '宿舍'},])

    上述代码中,第1行代码定义了subject,表示学习科目;第2行代码定义了content, 表示学习内容;第3行代码定义了nextId,表示新添加数据的id;第4行代码定义了默认 选中的学习地点;第5~9行代码定义了options数组,表示学习地点,其中placeCode属性 表示地点编号,place属性表示地点名称。

② 添加学习科目区域的页面结构,具体代码如下。

<div class="col-auto"><div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习科目</span><input type="text" class="form-control" placeholder="请输入学习科目" v-model.trim="subject"/></div></div>

上述代码中,第2~5行代码定义了学习科目区域,通过标签定义的文本框可 以输入学习科目,通过v-model指令,将标签与subject实现数据的双向绑定,即当更改文本框中的值时subject的值更改。同时为v-model指令添加了trim修饰符,用于自动过滤用户输入的首尾空白字符。

③ 添加学习任务区域的页面结构,具体代码如下。

<div class="col-auto"><div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习内容</span><textarea class="form-control" v-model.trim="content" placeholder="请输入学习内容" :style="{ height:'32px'}"></textarea></div></div>

上述代码中,第2~5行代码定义了学习内容区域,通过标签定义的多行文 本框可以输入学习内容,通过v-model指令与content绑定,实现视图与数据的双向绑 定。同时为v-model指令添加了trim修饰符,用于自动过滤用户输入的首尾空白字符。

④ 添加学习地点区域的页面结构,具体代码如下。

<div class="col-auto"><div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习地点</span><select class="from-select form-select-sm" v-model="selectedOption"><option v-for="option in options" :value="option.place" :key="option.placeCode">{{option.place}}</option></select></div></div>

上述代码中,第2~9行代码定义了学习地点区域,其中,第4~8行代码通过标签定义了下拉列表,通过v-model指令与selectedOption绑定,实现数据的双向绑定。 如果v-model指令的初始值不匹配任何一个选项,标签会渲染成未选择的状态, 所以selectedOption 属性值为“自习室”,表示标签的初始值为“自习室”,自习室为下拉列表中定义的一个值。第5~7行代码通过v-for条件渲染指令实现学习地点的渲染,当下拉列表中选项改变时,selectedOption属性更改。

⑤ 为<form>标签添加submit事件,实现单击“添加”按钮时添加信息,具体代码如下。

<form @submit.prevent="add">
......
</form>

添加事件处理函数为add(),同时为submit 事件添加事件修饰符prevent,用来阻止表单的默认提交行为。实现在单击按钮后提交表单,执行add()方法。

⑥ 在<script setup>标签中编写add()方法,实现学习计划的添加,具体代码如下。

let add=()=>{if(subject.value === '') {alert('学习科目为必填项')return}nextId.value=Math.max(...list.value.map(item => item.id)) + 1const obj ={id:nextId.value,subject: subject.value,content:content.value,place: selectedOption.value,status:false,}list.value.push(obj)subject.value=''content.value=''selectedOption.value='自习室'}

   上述代码中,第2~5行代码通过if进行判断,若学习科目字段subject为空,则弹出提示,且不执行接下来的添加操作;第6行代码,通过调用max()方法,找到list数组中 id 中最大值,新添加数据的id为最大值加1;第7~13行代码为需要新添加的数据,包括 id、subject、content、place 等,在默认情况下 status 为 false,表示未完成该学习计划;第 14 行代码调用push()方法实现将obj对象添加到list数组的末尾;第15~16行代码将 subject、content 中的数据清空;第17行代码定义下拉列表的默认值。

自此,上述代码结束,完整代码如下:

<template><div class="card"><div class="card-header">学习机计划表</div><div class="card-body"><form @submit.prevent="add"><div class="row g-4"><div class="col-auto"><div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习科目</span><input type="text" class="form-control" placeholder="请输入学习科目" v-model.trim="subject"/></div></div><div class="col-auto"><div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习内容</span><textarea class="form-control" v-model.trim="content" placeholder="请输入学习内容" :style="{ height:'32px'}"></textarea></div></div><div class="col-auto"><div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习地点</span><select class="from-select form-select-sm" v-model="selectedOption"><option v-for="option in options" :value="option.place" :key="option.placeCode">{{option.place}}</option></select></div></div><div class="col-auto"><button type="submit" class="btn btn-primary">添加</button></div></div></form></div></div><table class="table table-striped table-hover table-bordered"><thead><tr><th scope="col">序号</th><th scope="col">学习科目</th><th scope="col">学习内容</th><th scope="col">学习地点</th><th scope="col">完成状态</th><th scope="col">操作</th></tr></thead><tbody><tr v-for="item in list" :key="item.id"><td>{{item.id}}</td><td>{{item.subject}}</td><td>{{item.content}}</td><td>{{item.place}}</td><td><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="'cd' + item.id" v-model="item.status" /><label class="form-check-label" for="'cd' + item.id" v-if="item.status">已完成</label><label class="form-check-label" for="'cd' + item.id" v-else>未完成</label></div></td><td><a href="javascript:;" @click="remove(item.id, item.status)">删除</a></td></tr></tbody></table>
</template><script setup>import {ref} from 'vue'const list =ref([{id:'1',subject:'Vue.js前端实战开发',content:'学习指令,例如v-if、v-for、v-model等',place:'自习室',status:false,},])let remove=(id,status) =>{if(status) {list.value=list.value.filter(item=>item.id !== id)}else{alert('请完成该学习计划后再进行删除操作!')}}let subject=ref('')let content=ref('')let nextId=ref('')let selectedOption=ref('自习室')let options = ref([{ placeCode: 0, place: '自习室'},{ placeCode: 1, place: '图书馆'},{ placeCode: 2, place: '宿舍'},])let add=()=>{if(subject.value === '') {alert('学习科目为必填项')return}nextId.value=Math.max(...list.value.map(item => item.id)) + 1const obj ={id:nextId.value,subject: subject.value,content:content.value,place: selectedOption.value,status:false,}list.value.push(obj)subject.value=''content.value=''selectedOption.value='自习室'}
</script><style>
</style>

运行结果如图:

至此,“学习计划表”完成。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/285587.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux】权限管理

文章目录 前言1.权限访问者的分类2.文件类型与访问权限3.文件权限值的表达方式4.文件访问权限的相关设置5.file指令6.目录权限理解与漏洞7.粘滞位的理解 前言 Linux下有两种用户&#xff1a;超级用户(root)和普通用户 超级用户&#xff1a;可以再linux系统下做任何事情&#x…

Vue3 + Vite + TS + Element-Plus + Pinia项目(3)--新建路由

1、在src文件夹下新建router文件夹后&#xff0c;创建index.ts文件 2、具体如下 import { createRouter, createWebHashHistory } from vue-routerconst router createRouter({history: createWebHashHistory(),routes: [{path: "/index",component: () > impor…

关于YOLOv9项目中使用已有模块自由改进的教程

专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;助力高效涨点&#xff01;&#xff01;&#xff01; 1. 文件说明 在YOLOv5-v9&#xff0c;模型的结构是以yaml文件的存储。我们可以在原有的yaml基础上增、减、改模块&#xff0c;创作我们自己的模型。 …

ASM四部曲之一:什么是ASM

文章目录 前言什么是.class文件什么是ASM概述作用域模型基于ASM的程序架构 ASM库结构 前言 本文翻译自ASM官方文档。 什么是.class文件 Java字节码文件&#xff08;.class&#xff09;是Java编译器编译Java源文件&#xff08;.java&#xff09;产生的目标文件。它是一种8位字…

基于SpringBoot+Layui的社区物业管理系统

项目介绍 社区物业管理系统是基于java程序开发,本系统分为业主和管理员两个角色 业主可以登陆系统,查看车位费用信息,查看物业费用信息,在线投诉,查看投诉,在线报修; 管理员可以车位收费信息,物业收费信息,投诉信息,楼宇信息,房屋信息,业主信息,车位信息,抄表信…

芯片设计工程师必备基本功——《Verilog+HDL应用程序设计实例精讲》

进入芯片行业需要学习哪些基本功呢&#xff1f;其实芯片设计工程师的技能是通过多年的经验学习的。在您开始作为芯片设计工程师工作之前&#xff0c;很难给出一个需要的全面的单一列表&#xff0c;也不可能学习所有内容。话虽如此&#xff0c;但您开始芯片设计师职业生涯时必须…

瑞萨杯(一)

基础信息 RA6M5&#xff1a;ARM V8架构&#xff0c;24MHz外置晶振&#xff0c;200MHz主频 SCI&#xff08;Serial Communications Interface&#xff09;&#xff0c;意为串行通信接口 参考链接&#xff1a; 【瑞萨RA系列FSP库开发】RASCKeil的环境搭建_瑞萨ra mdk-CSDN博客…

Web安全基础入门+信息收集篇

教程介绍 学习信息收集&#xff0c;针对域名信息,解析信息,网站信息,服务器信息等&#xff1b;学习端口扫描&#xff0c;针对端口进行服务探针,理解服务及端口对应关系&#xff1b;学习WEB扫描&#xff0c;主要针对敏感文件,安全漏洞,子域名信息等&#xff1b;学习信息收集方法…

【webpack】----错误解决【Cannot read properties of undefined (reading ‘tap‘)】

1. 报错场景 安装 webpack-obfuscator 后&#xff0c;进行 js 代码混淆编译的时候报错。 2. 报错截图 3. 错误原因 通常是由于版本不兼容或配置错误引起的。 4. 查询本地 webpack 版本 4.1 查询命令 npm 查询 npm view webpack versionyarn 查询 yarn info webpack ver…

2024年第14届生物医学工程与技术国际会议(ICBET 2024)即将召开!

2024年第14届生物医学工程与技术国际会议&#xff08;ICBET 2024&#xff09;将于2024年6月14日至17日在韩国首尔举行。 会议旨在汇聚来自世界各地的研究人员、工程师、院士和行业专业人士&#xff0c;展示他们在生物医学工程与技术领域的最新研究成果和进展。 会议以“生物医学…

欧拉法和Runge-Kutta(龙格-库塔)方法

Euler方法有各种格式&#xff0c;但其精度最高不超过2阶&#xff0c;一般难以满足实际计算的精度要求。因此&#xff0c;有必要构造精度更高的数值计算公式求解微分方程。Runge-Kutta方法就是一种高精度的经典的解常微分方程的单步方法。 下面是欧拉法例子&#xff1a; 参考链接…

【JavaEE -- 网络初识】

网络初识 1. 局域网和广域网1.1 局域网&#xff08;LAN&#xff09;1.2 广域网WAN 2. 网络通信基础2.1 IP地址2.2 端口号 3. 协议 -- 重点3.1 网络通信协议拆分成多层3.2 TCP/IP 五层网络协议 4. 封装和分用4.1 封装过程4.2 分用过程4.3 网络传输的数据单位 5. 网络编程中的客户…

Java基础-反射

文章目录 1.快速入门1.案例引入2.代码实例3.反射机制原理图 2.反射相关类1.反射获取类的成员代码实例结果 2.反射调用优化1.关闭访问检查2.代码实例 3.Class类1.类图2.基本介绍3.Class类常用方法代码实例结果 4.获取Class类对象代码实例结果 5.哪些类型有Class对象 4.类加载1.基…

学习刷题-13

3.23 hw机试【二叉树】 剑指offer32 剑指 offer32&#xff08;一、二、三&#xff09;_剑指offer 32-CSDN博客 从上到下打印二叉树I 一棵圣诞树记作根节点为 root 的二叉树&#xff0c;节点值为该位置装饰彩灯的颜色编号。请按照从 左 到 右 的顺序返回每一层彩灯编号。 输…

Spring Cloud Alibaba Sentinel 使用详解

一、Sentinel 介绍 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。 Sentinel 以流量为切入点&#xff0c;从流量控制、熔断降级、系统负载保护等多个维度保护服务的稳定性。 Sentinel 具有以下特征: 丰富的应用场景&#xff1a; Sentinel 承接了阿里巴…

微服务(基础篇-003-Nacos集群搭建)

目录 Nacos集群搭建 1.集群结构图 2.搭建集群 2.1.初始化数据库 2.2.下载nacos 2.3.配置Nacos 2.4.启动 2.5.nginx反向代理 2.6.优化 视频地址&#xff1a; 06-Nacos配置管理-nacos集群搭建_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1LQ4y127n4?p29&…

Vue字符串里的中文数字转换为阿拉伯数字

js字符串里的汉字数字转化为数字 <template><view><view><view class"inpbox" ><textarea v-model"voiceMane" input"convert" ></textarea></view></view></view> </template> &…

SpringCloudAlibaba之Nacos Config

1、服务配置中心介绍 首先我们来看一下,微服务架构下关于配置文件的一些问题&#xff1a; 配置文件相对分散。在一个微服务架构下&#xff0c;配置文件会随着微服务的增多变的越来越多&#xff0c;而且分散在各个微服务中&#xff0c;不好统一配置和管理。配置文件无法区分环境…

【windows】安装 Tomcat 及配置环境变量

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

Protobuf基础使用

Protobuf是什么 在我们日常编写代码的过程中&#xff0c;经常会涉及到网络传输的部分。我们通常会在网络之间传递各种各样的请求&#xff0c;但是在我们日常架构之中&#xff0c;经常会涉及后端服务器之间的通信&#xff0c;通信过程中&#xff0c;可能传递的对象就是一个类。…