VUE-列表

news/2025/1/11 1:00:59/

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>
文章来源:https://blog.csdn.net/qq_43004728/article/details/137920639
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/news/1424402.html

相关文章

机器学习和深度学习 -- 李宏毅(笔记与个人理解)Day 13

Day13 Error surface is rugged…… Tips for training :Adaptive Learning Rate critical point is not the difficult Root mean Square --used in Adagrad 这里为啥是前面的g的和而不是直接只除以当前呢? 这种方法的目的是防止学习率在训练过程中快速衰减。如果只用当前的…

前端请求404,后端保无此方法

1、微信小程序前端路径404 2、后端报无此路径 3、查看路径下对应的方法 发现忘了在list方法前加GetMapping(“/list”)&#xff0c;加上即可

【python+Excel】读取和存储测试数据完成接口自动化测试

http_request2.py用于发起http请求 #读取多条测试用例 #1、导入requests模块 import requests #从 class_12_19.do_excel1导入read_data函数 from do_excel2 import read_data from do_excel2 import write_data from do_excel2 import count_case #定义http请求函数COOKIENon…

20.安全性测试与评估

每年都会涉及&#xff1b;可能会考大题&#xff1b;多记&#xff01;&#xff01;&#xff01; 典型考点&#xff1a;sql注入、xss&#xff1b; 从2个方面记&#xff1a; 1、测试对象的功能、性能&#xff1b; 2、相关设备的工作原理&#xff1b; 如防火墙&#xff0c;要了解防…

【LeetCode热题100】【动态规划】乘积最大子数组

题目链接&#xff1a;152. 乘积最大子数组 - 力扣&#xff08;LeetCode&#xff09; 要找乘积最大的连续子数组&#xff0c;我们之前做过找和最大的连续子数组【LeetCode热题100】【普通数组】最大子数组和-CSDN博客 对于和来讲&#xff0c;定义dp[i]是以nums[i]为结尾的最大…

常见分类算法及其应用

常见分类算法及其应用 一、引言 在机器学习和数据挖掘领域&#xff0c;分类算法是非常重要的一类算法。它们被广泛应用于各种场景&#xff0c;如邮件过滤、金融欺诈检测、疾病预测等。本文将介绍几种常见的分类算法&#xff0c;包括逻辑回归、决策树、随机森林、支持向量机和…

Android 打包 65535是什么

在 Android 打包过程中提到的 “65535” 是指 Dex 文件中单个方法引用的上限&#xff0c;这通常被称为 “65K 方法限制”。在 Android 应用程序中&#xff0c;所有 Java/Kotlin 代码在编译后都会转换成 DEX (Dalvik Executable) 文件&#xff0c;这是一种特别为 Android 优化的…

[学习笔记] 网络安全 bp爆破

我们用的靶场是用的一个皮卡丘的漏洞练习平台的一个靶场首先要开启浏览器代理&#xff0c;然后开启在bp上开启就是拦截代理模块里面的拦截它有4个攻击模式&#xff0c;分别是&#xff1a; Sniper&#xff08;狙击手&#xff09;&#xff1a;这种攻击方式主要是将包内各个用$$符…