vue.js——学习计划表

news2024/11/22 14:51:23

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)) + 1
		const 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)) + 1
		const 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.coloradmin.cn/o/1551351.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

tensorflow安装GPU版报错cublasLt64_11.dll缺失

tensorflow安装GPU版报错cublasLt64_11.dll缺失

我的报错是&#xff1a; Use tf.config.list_physical_devices(GPU) instead. 2024-03-28 17:01:46.724677: I tensorflow/core/platform/cpu_feature_guard.cc:142] This TensorFlow binary is optimized with oneAPI Deep Neural Network Library (oneDNN) to use the follo…
阅读更多...
蓝桥杯嵌入式学习笔记(6):IIC程序设计

蓝桥杯嵌入式学习笔记(6):IIC程序设计

目录 前言 1. IIC基本原理 2. 电路原理 3. 代码编程 3.1 预备工作 3.2 AT24C02写读功能编写 3.2.1 AT24C02写操作实现 3.2.2 AT24C02读操作实现 3.3 MCP4017写读功能编写 3.3.1 MCP4017写操作实现 3.3.2 MCP4017读操作实现 3.4 main.c编写 3.4.1 头文件引用 3.4.…
阅读更多...
react-navigation：

react-navigation：

我的仓库地址&#xff1a;https://gitee.com/ruanjianbianjing/bj-hybrid react-navigation&#xff1a; 学习文档&#xff1a;https://reactnavigation.org 安装核心包: npm install react-navigation/native 安装react-navigation/native本身依赖的相关包: react-nativ…
阅读更多...
水电站生态流量监测解决方案:亲历水电站生态监控改造

水电站生态流量监测解决方案:亲历水电站生态监控改造

​记得那是在2022年夏天,我所在的环保咨询公司接到了一项非常具有挑战性的监测项目。某省的环保部门要求对辖区内所有水电站的生态流量情况进行评估,并给出整改建议。作为项目负责人,我深知这项工作的重要意义。&#xff08;选自&#xff1a;智慧水务数字孪生安全监测解决方案提…
阅读更多...
武汉星起航公司助力零经验新手卖家征战亚马逊跨境电商市场

武汉星起航公司助力零经验新手卖家征战亚马逊跨境电商市场

在数字化浪潮的推动下&#xff0c;亚马逊跨境电商行业正逐渐成为众多创业者和企业家们的新战场。然而&#xff0c;对于零经验的新手卖家而言&#xff0c;这片广袤的电商海洋无疑充满了未知与挑战。在这个关键时刻&#xff0c;武汉星起航公司以其专业的服务和深厚的行业积累&…
阅读更多...
怎么做扫描二维码填写数据？用二维码收集用户反馈的方法

怎么做扫描二维码填写数据？用二维码收集用户反馈的方法

现在很多人都开始使用扫码填表的方式来收集用户反馈、签到登记、问卷调查等类型的用途&#xff0c;这种方式的使用不仅减少了制作者的成本压力&#xff0c;采用无纸化登记也提高了用户填写数据的便利性。只需要制作一个二维码&#xff0c;分享之后就可以让许多人同时扫码填写数…
阅读更多...
详解GPT模型的前世今生

详解GPT模型的前世今生

省流版&#xff1a; GPT模型是一种基于神经网络的自回归语言模型。该模型使用了一个称为“Transformer”的架构&#xff0c;从而有效避免了传统的循环神经网络产生的梯度消失问题。从第一代GPT到现在的GPT4&#xff0c;没带都产生了不同的变化&#xff0c;其性能也越来越强大。…
阅读更多...
【Java扫盲篇】String、String Buffer和String Builder的区别

【Java扫盲篇】String、String Buffer和String Builder的区别

你在面试时&#xff0c;面试官让你讲讲String String Buffer String Builder的区别&#xff0c;你是否能流畅的、完整的叙述出他们三者的区别? ✍先说结论 相同点&#xff1a; 他们的底层都是由char数组实现的。不同点&#xff1a; String对象一旦创建&#xff0c;是不能修…
阅读更多...
android安卓餐厅点餐课设

android安卓餐厅点餐课设

一、引言 随着移动互联网的快速发展&#xff0c;手机应用已经成为我们日常生活中不可或缺的一部分。餐饮行业也积极借助移动应用的力量&#xff0c;提供更便捷、高效的点餐服务。本文将介绍一个基于安卓系统开发的餐厅点餐APP的课程设计项目&#xff0c;探讨其设计理念、功能特…
阅读更多...
PostgreSQL数据库如何新建登录用户？

PostgreSQL数据库如何新建登录用户？

在PostgreSQL数据库中&#xff0c;如何创建新的登录用户呢&#xff1f; 默认情况&#xff0c;PostgreSQL数据库的默认用户是&#xff1a;postgres &#xff0c;如果我们需要创建一个新的低权限用户角色&#xff0c;应该如何操作&#xff1f;本章教程&#xff0c;简单介绍一下这…
阅读更多...
JavaFX的安装和使用

JavaFX的安装和使用

JavaFX的安装 安装可以参考&#xff1a;IDEA安装JavaFx_idea2019 javafx 下载安装-CSDN博客 JavaFX的使用 在JavaFX中&#xff0c;类的成员函数和操作本身被模式化作为在目标类中的类&#xff0c;而参数和返回值被表示为属性。代表目标对象的属性名是“this”。代表返回值的…
阅读更多...
【C++初阶】之类和对象（中）

【C++初阶】之类和对象（中）

【C初阶】之类和对象&#xff08;中&#xff09; ✍ 类的六个默认成员函数✍ 构造函数&#x1f3c4; 为什么需要构造函数&#x1f3c4; 默认构造函数&#x1f3c4; 为什么编译器能自动调用默认构造函数&#x1f3c4; 自己写的构造函数&#x1f3c4; 构造函数的特性 ✍ 拷贝构造…
阅读更多...
经纬恒润RTaW-Pegase：车载网络通信建模与时间特性分析工具

经纬恒润RTaW-Pegase：车载网络通信建模与时间特性分析工具

▎RTaW简介 RTaW-Pegase是由法国国家信息与自动化研究所&#xff08;INRIA&#xff09;旗下的RTaW公司开发的产品。它主要用于构建和优化汽车、航空航天以及工业领域的通信网络&#xff0c;包括时间敏感网络&#xff08;TSN&#xff09;、CAN&#xff08;FD&#xff0c;XL&…
阅读更多...
【系统架构师】-第12章-信息系统架构

【系统架构师】-第12章-信息系统架构

信息系统架构(ISA)是指对某一特定内容里的信息进行统筹、规划、设计、安排等一系列有机处理的活动。 为了更好地理解信息系统架构的定义&#xff0c; 特作如下说明: (1)架构是对系统的抽象&#xff0c;它通过描述元素、元素的外部可见属性及元素之间的关系来反映这种抽象。因此…
阅读更多...
【QT入门】 Qt代码创建布局之水平布局、竖直布局详解

【QT入门】 Qt代码创建布局之水平布局、竖直布局详解

往期回顾&#xff1a; 【QT入门】 Qt实现自定义信号-CSDN博客 【QT入门】 Qt自定义信号后跨线程发送信号-CSDN博客 【QT入门】 Qt内存管理机制详解-CSDN博客 【QT入门】 Qt代码创建布局之水平布局、竖直布局详解 先看两个问题&#xff1a; 1、ui设计器设计界面很方便&#xf…
阅读更多...
PyQT5学习--新建窗体模板

PyQT5学习--新建窗体模板

目录 1 Dialog 2 Main Window 3 Widget Dialog 模板&#xff0c;基于 QDialog 类的窗体&#xff0c;具有一般对话框的特性&#xff0c;如可以模态显示、具有返回值等。 Main Window 模板&#xff0c;基于 QMainWindow 类的窗体&#xff0c;具有主窗口的特性&#xff0c;窗口…
阅读更多...
计算机网络基础——网络安全/ 网络通信介质

计算机网络基础——网络安全/ 网络通信介质

chapter3 网络安全与管理 1. 网络安全威胁 网络安全&#xff1a;目的就是要让网络入侵者进不了网络系统&#xff0c;及时强行攻入网络&#xff0c;也拿不走信息&#xff0c;改不了数据&#xff0c;看不懂信息。 事发后能审查追踪到破坏者&#xff0c;让破坏者跑不掉。 网络…
阅读更多...
Composer常见错误解决

Composer常见错误解决

Composer 是 PHP 开发中常用的依赖管理工具&#xff0c;但在使用过程中可能会遇到各种错误。以下是一些常见的 Composer 错误以及相应的解决方法&#xff0c;希望能帮助你更好地解决这些问题。 Memory exhausted 解决方法&#xff1a; 增加内存限制&#xff0c;可以通过在命令…
阅读更多...
基于随机森林与LSTM神经网络的住宅用电比较分析及预测 代码+论文 完整毕设

基于随机森林与LSTM神经网络的住宅用电比较分析及预测 代码+论文 完整毕设

摘要 本文旨在探讨基于随机森林&#xff08;Random Forest&#xff09;与长短期记忆神经网络&#xff08;Long Short-Term Memory, LSTM&#xff09;的住宅用电比较分析及预测方法。随机森林是一种集成学习方法&#xff0c;通过构建多个决策树进行预测&#xff0c;具有较强的鲁…
阅读更多...
掌握多线程之精髓：优雅地等待线程结果并继续后续操作

掌握多线程之精髓：优雅地等待线程结果并继续后续操作

在当今这个信息爆炸的时代&#xff0c;多线程编程已成为高效处理并发任务的重要工具。然而&#xff0c;如何在多线程编程中优雅地等待线程结果并继续后续操作&#xff0c;却是一个让人头疼的问题。今天&#xff0c;我们就来探讨如何使用Executors.newFixedThreadPool和executor…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023