VUE-列表

VUE-列表

列表功能

如下例子

列表展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.table {width: 800px;margin: 20px auto;border-collapse: collapse;}.table th {background: #0094ff;color: white;font-size: 16px;border: 1px solid black;padding: 5px;}.table tr td {text-align: center;font-size: 16px;padding: 5px;border: 1px solid black;}</style>
</head><body><div id="test"><table class="table"><th>id</th><th>name</th><th>createTime</th><th>operator</th><tr v-for="item in list"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#">delete</a></td></tr></table></div><script>var vm = new Vue({el: '#test',data:{list: [{id: 1, name: 'dany', ctime: new Date}, {id: 2, name: 'wenqun', ctime: new Date}]},// methods: {//     toggle() {//         this.flag = !this.flag//     }// }});</script></body></html>

数据是存放在data的list中的,将data中的数据通过v-for遍历给表格。

上方代码运行的效果:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如果没有数据,增加提示

如果list中没有数据,那么表格中就会只显示表头<th>,这样显然不太好看。为此,我们需要增加一个v-if判断:当数据为空时,显示提示。如下:

			<tr v-show="list.length == 0"><td colspan="4">列表无数据</td></tr>

item的添加

具体实现步骤如下:

(1)用户填写的数据单独存放在data属性里,并采用v-model进行双向绑定。

(2)用户把数据填好后,点击add按钮。此时需要增加一个点击事件的方法,将data中的数据放到list中(同时,清空文本框中的内容)。

(3)将数据展示出来。v-for有个特点:当list数组发生改变后,vue.js就会自动调用v-for重新将数据生成,这样的话,就实现了数据的自动刷新。

完整的代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.table {width: 800px;margin: 20px auto;border-collapse: collapse; /*???,???:???????????*/}.table th {background: #0094ff;color: white;font-size: 16px;border: 1px solid black;padding: 5px;}.table tr td {text-align: center;font-size: 16px;padding: 5px;border: 1px solid black;}.form {width: 800px;margin: 20px auto;}.form button {margin-left: 10px;}</style></style>
</head><body><div id="test"><div id="form">no:    <input type="text" v-model="formData.id">name:   <input type="text" v-model="formData.name"><button @click="addDate">add new data</button></div><table class="table"><th>id</th><th>name</th><th>createTime</th><th>operator</th><tr v-show="list.length == 0"><td colspan="4">no data</td></tr><tr v-for="item in list"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#">delete</a></td></tr></table></div><script>var vm = new Vue({el: '#test',data:{list: [{id: 1, name: 'tom', ctime: new Date}, {id: 2, name: 'jack', ctime: new Date}],formData: {id: 0,name: ""}},methods: {addDate() {this.list.push({id: this.formData.id, name: this.formData.name, ctime: new Date()});this.formData.id=0;this.formData.name='';}}});</script></body></html>

item的删除

        <!--绑定delete事件,根据括号里的参数进行删除--><td><a href="#" v-on:click="delData(item.id)">删除</a></td>delData: function (id) {// 0 提醒用户是否要删除数据if (!confirm('是否要删除数据?')) {//当用户点击的取消按钮的时候,应该阻断这个方法中的后面代码的继续执行return;}// 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值(在数组中的索引值)var index = this.list.findIndex(function (item) {return item.id == id});// 2.0 调用方法:list.splice(待删除的索引, 删除的元素个数)this.list.splice(index, 1);}
 // 根据id得到下标// 默认去遍历list集合,将集合中的每个元素传入到function的item里,var index = this.list.findIndex(function(item){//根据item中的id属性去匹配传进来的id//如果是则返回true ;否返回false,继续下面的一条数据的遍历,以此类推return item.id ==id; //如果返回true,那么findIndex方法会将这个item对应的index});

也就是说,我们是根据 item.id 找到这个 item 是属于list 数组中的哪个index索引。找到了index,就可以根据index来删除数组中的那个元素了。

当item被删除后,v-for会被自动调用,进而自动更新view。

按条件筛选item

现在要求实现的效果是,在搜索框输入关键字 keywords,列表中仅显示匹配出来的内容。也就是说:

  • 之前, v-for 中的数据,都是直接从 data 上的list中直接渲染过来的。
  • 现在, 我们在使用v-for进行遍历显示的时候,不能再遍历全部的 list 了;我们要自定义一个 search 方法,同时,把keywords作为参数,传递给 search 方法。即v-for="item in search(keywords)"

在 search(keywords) 方法中,为了获取 list 数组中匹配的item,我们可以有两种方式实现。如下。

方式一:采用forEach + indexOf()
search(keywords) { // 根据关键字,进行数据的搜索,返回匹配的item//实现方式一:通过 indexOf() 进行匹配。var newList = [];this.list.forEach(item => {if (item.name.indexOf(keywords) != -1) {  //只要不等于 -1,就代表匹配到了newList.push(item)}})return newList
}

上方代码中, 我们要注意 indexOf(str) 的用法。举例如下:

    var str = 'smyhvae';console.log(str.indexOf('s'));  //打印结果:0console.log(str.indexOf(''));   //打印结果:0。(说明,即使去匹配空字符串,也是返回0)console.log(str.indexOf('h'));  //打印结果:3console.log(str.indexOf('x'));  //打印结果:-1 (说明,匹配不到任何字符串)

上方代码中,也就是说,如果参数为空字符串,那么,每个item都能匹配到。

方式二: filter + includes()方法
search(keywords) { // 根据关键字,进行数据的搜索,返回匹配的itemvar newList = this.list.filter(item => {// 注意 : ES6中,为字符串提供了一个新方法,叫做  String.prototype.includes('要包含的字符串')//  如果包含,则返回 true ,否则返回 falseif (item.name.includes(keywords)) {return item}})return newList
}

注意:forEach some filter findIndex,这些都属于数组的新方法,都会对数组中的每一项,进行遍历,执行相关的操作。这里我们采用数组中的 filter 方法,

总的来说,方式二的写法更优雅,因为字符串的 includes()方法确实很实用。

完整版代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><style>.table {width: 800px;margin: 20px auto;border-collapse: collapse; /*???,???:???????????*/}.table th {background: #0094ff;color: white;font-size: 16px;border: 1px solid black;padding: 5px;}.table tr td {text-align: center;font-size: 16px;padding: 5px;border: 1px solid black;}.form {width: 800px;margin: 20px auto;}.form button {margin-left: 10px;}</style></style>
</head><body><div id="test"><div id="form">no:    <input type="text" v-model="formData.id">name:   <input type="text" v-model="formData.name"><button @click="addDate">add new data</button>search:<input type="text"  v-model="keyWords"></div><table class="table"><th>id</th><th>name</th><th>createTime</th><th>operator</th><tr v-show="search(keyWords).length == 0"><td colspan="4">no data</td></tr><tr v-for="item in search(keyWords)"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#" @click="delDate(item.id)">delete</a></td></tr></table></div><script>var vm = new Vue({el: '#test',data:{list: [{id: 1, name: 'tom', ctime: new Date}, {id: 2, name: 'jack', ctime: new Date}],formData: {id: 0,name: ""},keyWords: ""},methods: {addDate() {this.list.push({id: this.formData.id, name: this.formData.name, ctime: new Date()});this.formData.id=0;this.formData.name='';},delDate: function (id) {if (!confirm("whether to delete the date?")) {return;}var index = this.list.findIndex(function (item) {return item.id==id});this.list.splice(index,1)},search(keyWords) {var newList = this.list.filter(item=>{if (item.name.includes(keyWords)) {return item}})return newList}}});</script></body></html>

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

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

相关文章

CorelDRAW Graphics Suite2024最新永久免费版功能强大的图形设计软件

CorelDRAW Graphics Suite是一款功能强大的图形设计软件套件&#xff0c;它提供了丰富的绘图工具、编辑功能和设计资源&#xff0c;适用于从专业设计师到普通用户的广泛群体。以下是CorelDRAW Graphics Suite的一些主要功能特点&#xff1a; 矢量图形设计&#xff1a;CorelDRAW…

Jenkins 流水线多阶段构建

Jenkins流水线配置遇到 无法识别的。需要使用 自定义环境 项。 比如官网的在流水线中使用Docker Started by remote host 172.17.0.1 Obtained Jenkinsfile from git http://10.99.20.51:8082/root/java-devops-demo.git org.codehaus.groovy.control.MultipleCompilationErro…

智慧化赋能园区新未来:探讨智慧园区如何以科技创新为引擎,推动产业转型升级

随着科技的飞速发展&#xff0c;智慧化已成为推动园区产业升级和转型的重要引擎。智慧园区&#xff0c;以其高效、便捷、智能的特性&#xff0c;正逐步改变传统的产业园区模式&#xff0c;为产业发展注入新的活力。本文旨在探讨智慧园区如何以科技创新为引擎&#xff0c;推动产…

制作适用于openstack平台的win10镜像

1. 安装准备 从MSDN下载windows 10的镜像虚拟机开启CPU虚拟化的功能。从Fedora 网站下载已签名的 VirtIO 驱动程序 ISO 。 创建15 GB 的 qcow2 镜像&#xff1a;qemu-img create -f qcow2 win10.qcow2 15G 安装必要的软件 yum install qemu-kvm qemu-img virt-manager libvir…

GaN HEMT中短沟道效应的建模

来源&#xff1a;Modeling of Short-Channel Effects in GaN HEMTs&#xff08;TED 20年&#xff09; 摘要 在本文中&#xff0c;我们提出了一种用于估算GaN高电子迁移率晶体管&#xff08;HEMT&#xff09;器件中短沟道效应&#xff08;SCEs&#xff09;的显式和解析的基于电…

【创建型模式】单例模式

一、单例模式概述 单例模式的定义&#xff1a;又叫单件模式&#xff0c;确保一个类只有一个实例&#xff0c;并提供一个全局访问点。&#xff08;对象创建型&#xff09; 要点&#xff1a; 1.某个类只能有一个实例&#xff1b;2.必须自行创建这个实例&#xff1b;3.必须自行向整…

固体矿产资源储量分类GBT17766-2020

1999分类标准采用三轴体系划分资源量与处理&#xff0c;表达复杂、经济意义划分过细、实用性不强 虽然不再采用”三轴“表达方式&#xff0c;但依然考虑地质可靠程度、经济意义、可行性评价 矿产资源勘查&#xff1a;通常依靠地球科学知识&#xff0c;运用地质填图&#xff0…

python语言零基础入门——变量与简单数据类型

目录 一、变量 1.创建变量 2.变量的修改 3.变量的命名 &#xff08;1&#xff09;常量 &#xff08;2&#xff09;标识符 &#xff08;3&#xff09;关键字 &#xff08;4&#xff09;命名规则 二、简单数据类型 1.变量的数据类型 2.数据类型 3.整型&#xff08;In…

软考-系统集成项目管理中级--项目人力资源管理(输入输出很重要!!!本章包含案例题,着重复习)

本章历年考题分值统计 本章重点常考知识点汇总清单(掌握部分可直接理解记忆) 1、人力资源管理的过程:(掌握) (1)项目人力资源计划编制:确定与识别项目中的角色、分配项目职责和汇报关系&#xff0c;并记录下来形成书面文件&#xff0c;其中也包括项目人员配备管理计划。…

C语言进阶课程学习记录-第39课 - 程序中的3个基本数据区

C语言进阶课程学习记录-第39课 - 程序中的3个基本数据区 栈实验-栈空间释放后数据无效堆静态存储区实验-静态变量和全局变量小结 本文学习自狄泰软件学院 唐佐林老师的 C语言进阶课程&#xff0c;图片全部来源于课程PPT&#xff0c;仅用于个人学习记录 栈 实验-栈空间释放后数据…

吴恩达机器学习笔记:第 8 周-13 聚类(Clustering)13.1-13.2

目录 第 8 周 13、 聚类(Clustering)13.1 无监督学习&#xff1a;简介 第 8 周 13、 聚类(Clustering) 13.1 无监督学习&#xff1a;简介 在这个视频中&#xff0c;我将开始介绍聚类算法。这将是一个激动人心的时刻&#xff0c;因为这是我们学习的第一个非监督学习算法。我们…

Day3 权限管理

Day3 权限管理 这里会总结构建项目过程中遇到的问题&#xff0c;以及一些个人思考&#xff01;&#xff01; 学习方法&#xff1a; 1 github源码 文档 官网 2 内容复现 &#xff0c;实际操作 项目源码同步更新到github 欢迎大家star~ 后期会更新并上传前端项目 创建管理员…

Windows的Tensorrt的安装

Tensorrt的下载 确定自己的CUDA版本,匹配的去下载Tensorrt。 Tensorrt的下载 下载完成之后,直接解压到文件夹即可。 环境变量配置 最重要的一部就是环境变量的配置。 官方的安装指导文件给出了两种方法: (1)要么直接将/lib 添加到环境变量 PATH 中 (诶,windows没有LD_L…

[AI Meta Llama-3] 最强开源大模型Llama 3发布!

最强开源大模型Llama 3发布&#xff01;我们看下重点&#xff1a; 今天&#xff0c;我们介绍Meta Llama 3&#xff0c;这是我们最先进的开源大型语言模型的下一代。Llama 3模型很快将在AWS、Databricks、Google Cloud、Hugging Face、Kaggle、IBM WatsonX、Microsoft Azure、N…

异步 IO 机制 io_uring

一、io_uring 原理 如何解决频繁 copy 的问题 → mmap 内存映射解决。 submit queue 中的节点和 complete queue 中的节点共用一块内存,而不是把 submit queue 中的节点 copy 到 complete queue 中。如何做到线程安全 → 无锁环形队列解决。二、io_uring 使用 内核为 io_uring…

Pytorch实用教程:nn.CrossEntropyLoss()的用法

在 PyTorch 中&#xff0c;nn.CrossEntropyLoss() 是一个非常常用且功能强大的损失函数&#xff0c;特别适合用于多类分类问题。这个损失函数结合了 nn.LogSoftmax() 和 nn.NLLLoss() (Negative Log Likelihood Loss) 两个操作&#xff0c;从而在一个模块中提供完整的交叉熵损失…

[qiankun]: Target container with #container not existed while childOne loading!

主应用container容器不存在导致无法挂载子应用 解决&#xff1a;不要将<div id"container"></div>放在Router标签内&#xff0c;跟Router同级即可

2024年核科学与地球化学国际会议 (ICNSG 2024)

2024年核科学与地球化学国际会议 (ICNSG 2024) 2024 International Conference on Nuclear Science and Geochemistry 【会议简介】 2024年核科学与地球化学国际会议即将在北京召开。本次会议旨在汇聚全球核科学与地球化学领域的专家学者&#xff0c;共同探讨核科学的最新进展…

Django模型的字段类型

Django模型中最重要并且也是唯一必须执行的就是字段定义。字段在类中进行定义&#xff0c;对应于实体数据库的字段。另外&#xff0c;定义模型字段名时为了避免冲突&#xff0c;不建议使用模型API中已经定义的关键字。 字段类型用以指定数据库的数据类型&#xff0c;例如Integ…

美团外卖10元无门槛通用券怎么领取10元外卖通用红包?

词令公众号美团外卖红包天天领入口&#xff0c;首次使用的外卖新客可领取10元无门槛通用券&#xff0c;点餐使用即可享受优惠&#xff1b; 美团外卖10元无门槛通用券怎么领取&#xff1f; 1、关注「词令」公众号&#xff0c;回复「外卖红包」&#xff1b; 2、打开后立即领取外…