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)) + 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>

运行结果如图：

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

vivado 手动布线

vivado 手动布线

手动路由 手动路由允许您为网络选择特定的路由资源。这给了你对信号将要采用的路由路径的完全控制。手动路由不调用route_design。路线在路线数据库中直接更新。当您想精确控制网络的延迟时&#xff0c;可能需要使用手动路由。对于例如&#xff0c;假设有一个源同步接口&#…
阅读更多...
面试题--3.18

面试题--3.18

1. http与https的区别&#xff0c;以及https的认证过程及加密算法 &#xff1f; 区别&#xff1a; https协议需要到CA申请证书&#xff0c;一般免费证书较少&#xff0c;因而需要一定费用。 http是超文本传输协议&#xff0c;信息是明文传输&#xff0c;https则是具有安全性…
阅读更多...
大型语言模型：技术回顾

大型语言模型：技术回顾

公众号&#xff1a;Halo 咯咯&#xff0c;欢迎关注~ 简介 很难说自然语言处理&#xff08;NLP&#xff09;的旅程是什么时候开始的。根据维基百科的文章《自然语言处理的历史》[1]&#xff0c;它可能始于 17 世纪&#xff0c;当时莱布尼茨和笛卡尔试图理解不同语言中单词之间的…
阅读更多...
让人担心的软件生态

让人担心的软件生态

shigen坚持更新文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 个人IP&#xff1a;shigen 其实很久之前shigen就想写这样的一篇文章&#xff0c;思考现在的软件生态和我们…
阅读更多...
c语言数据结构（9）——插入排序、希尔排序

c语言数据结构（9）——插入排序、希尔排序

欢迎来到博主的专栏——C语言数据结构 博主ID&#xff1a;代码小豪 文章目录 排序插入排序希尔排序 排序 现在有N个数据的序列&#xff0c;其对应的序列号为[r1 ,r2 ……rn];将该序列对应的数据[k1 ,k2 ……kn]排成满足递减或递减的序列的操作称为排序 插入排序 玩过斗地主…
阅读更多...
tomcat配置静态资源后无法正常访问

tomcat配置静态资源后无法正常访问

目录 一、场景二、配置三、访问异常四、排查五、原因六、解决 一、场景 1、将前端文件存在到指定目录 2、在tomcat配置静态资源 3、配置后无法正常访问到前端文件 二、配置 1、tomcat配置 2、静态资源 三、访问异常 四、排查 可以ping通&#xff0c;但是访问不了3080端口 …
阅读更多...
探究WordPress受欢迎的原因及其org和com的区别

探究WordPress受欢迎的原因及其org和com的区别

在当今互联网时代&#xff0c;WordPress已经成为了建立网站的首选工具之一&#xff0c;其受欢迎程度远远超出了其他竞争对手。那么&#xff0c;为什么WordPress如此受欢迎呢&#xff1f;让我们一起探究一下。 首先&#xff0c;WordPress是一个开源项目&#xff0c;这意味着任何…
阅读更多...
【UEditorPlus】后端配置项没有正常加载，上传插件不能正常使用

【UEditorPlus】后端配置项没有正常加载，上传插件不能正常使用

解决办法&#xff1a; 1、找到UEditorPlus的根目录&#xff0c;修改 ueditor.all.js 文件 搜索&#xff1a;isJsonp utils.isCrossDomainUrl(configUrl); 更改为&#xff1a;isJsonp false; 2、重新运行前端即可正常使用 如果出现依旧不行&#xff0c;请关闭服务&#xff…
阅读更多...
如何选择适合自己的办公空间

如何选择适合自己的办公空间

说到办公地点的选择&#xff0c;其实就跟挑衣服似的&#xff0c;得看场合、看需求&#xff0c;还得看个人喜好。有的人喜欢自由自在&#xff0c;有的人则需要稳定和私密。所以&#xff0c;咱们来看看哪些朋友更适合哪种办公环境。 适合共享办公室的&#xff1a; 刚起步的小公司…
阅读更多...
教师的晋升通道：走向专业成长的阶梯

教师的晋升通道：走向专业成长的阶梯

教师是一项需要不断学习、不断进步的职业。随着教育改革的不断深入&#xff0c;教师的晋升通道也越来越受到关注。本文将从教师的晋升通道、晋升标准和未来发展方向等方面进行探讨&#xff0c;旨在帮助广大教师了解自己的职业成长路径&#xff0c;促进个人发展。 一、教师的晋升…
阅读更多...
rtph264depay插件分析笔记

rtph264depay插件分析笔记

1、rtp协议头 2、rtp可以基于TCP或者UDP 其中基于TCP需要加4个字节的RTP标志 3、rtph264depay定义解析函数gst_rtp_h264_depay_process&#xff0c;通过RFC 3984文档实现。 static void gst_rtp_h264_depay_class_init (GstRtpH264DepayClass * klass) {GObjectClass *gobject…
阅读更多...
RTSP应用：实现视频流的实时推送

RTSP应用：实现视频流的实时推送

在实现实时视频流推送的项目中&#xff0c;RTSP&#xff08;Real Time Streaming Protocol&#xff09;协议扮演着核心角色。本文将指导你通过安装FFmpeg软件&#xff0c;下载并编译live555&#xff0c;以及配置ffmpeg进行视频流推送&#xff0c;来实现一个基本的RTSP流媒体服务…
阅读更多...
WIN使用LPD协议来共享打印机含统信UOS

WIN使用LPD协议来共享打印机含统信UOS

打开“控制面板”&#xff0c;“程序和功能”&#xff0c;“启动或关闭Windows功能”&#xff0c;下拉找到“打印和文件服务”&#xff0c;勾选“LPD打印服务”和“LPR端口监视器”。确定之后重启电脑&#xff0c;共享主机和其它需要添加共享打印机的都开启功能和重启。 一、启…
阅读更多...
SpringMVC设置全局异常处理器

SpringMVC设置全局异常处理器

文章目录 背景分析使用ControllerAdvice&#xff08;RestControllerAdvice&#xff09;ExceptionHandler实现全局异常全局异常处理-多个处理器匹配顺序存在一个类中存在不同的类中 对于过滤器和拦截器中的异常&#xff0c;有两种思路可以考虑 背景 在项目中我们有需求做一个全…
阅读更多...
定时器的原理和应用

定时器的原理和应用

#include<reg51.h> unsigned char s[]{0x3F,0x06,0x5B,0x4F,0x66,0x6D,0x7D,0x07,0x7F,0x6F}; unsigned char count0,num0; void inittimer() {TMOD0x01;//0000 0001TH0(65536-50000)/256; //定时50ms50000us 2562^8 初值向右边移动8位TL0(65536-50000)%256;ET01;//开启定…
阅读更多...
TouchGFX之Button

TouchGFX之Button

TouchGFX中的按钮是一种感应触控事件的控件&#xff0c;能够在按钮被按下/释放时发送回调 代码 #ifndef TOUCHGFX_ABSTRACTBUTTON_HPP #define TOUCHGFX_ABSTRACTBUTTON_HPP #include <touchgfx/Callback.hpp> #include <touchgfx/events/ClickEvent.hpp> #includ…
阅读更多...
面试题目--3.19

面试题目--3.19

1.foo()和foo()之间有什么区别&#xff1f; 代表所有的warning忽略 2.什么是csrf攻击&#xff1f;如何防范&#xff1f; csrf&#xff0c;跨站请求伪造&#xff0c;攻击方伪装用户身份发送请求从而窃取信息或者破坏系统。 基本原理&#xff1a;用户访问a网站登录并生成了coo…
阅读更多...
opencv 十九 python下实现多线程间rtsp直播流的复用

opencv 十九 python下实现多线程间rtsp直播流的复用

在多线程拉流的任务场景中&#xff0c;有时需要将一个rtsp拉取多次&#xff0c;每重新打开一次rtsp视频流就要多消耗一次带宽&#xff0c;为此基于类的静态对象实现rtsp视频流的复用。 1、实现代码 import threading import cv2,time #接收摄影机串流影像&#xff0c;采用多线…
阅读更多...
论文《Exploring to Prompt for Vision-Language Models》阅读

论文《Exploring to Prompt for Vision-Language Models》阅读

论文《Exploring to Prompt for Vision-Language Models》阅读 论文概况论文动机&#xff08;Intro&#xff09;MethodologyPreliminaryCoOp[CLASS]位置Context 是否跨 class 共享表示和训练 ExperimentsOverall ComparisonDomain GeneralizationContext Length (M) 和 backbon…
阅读更多...
如何配置本地ssh连接远程Linux服务器

如何配置本地ssh连接远程Linux服务器

1.条件 本地操作系统Ubuntu远程服务器&#xff08;Linux都可以&#xff09; 本地如果是Window,其实也一样&#xff0c;但是需要先下载ssh和putty工具&#xff0c;然后操作步骤是一样的 2.生成ssh公私钥对 # 在本地重新生成SSH公私钥对非常简单&#xff0c;在你的命令行终端&a…
阅读更多...
最新文章

Copyright @ 2022~2023