Vue的指令与过滤器之key的注意事项，这点值得注意的小细节

最新推荐文章于 2023-03-02 19:15:02 发布
原创 最新推荐文章于 2023-03-02 19:15:02 发布 · 478 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文探讨了在 Vue.js 开发中如何正确使用 key 指令。强调 key 的值应为唯一字符串或数字，推荐使用数据项的 id 属性，避免使用 index，以确保列表渲染性能和状态管理的准确性。同时指出，在使用 v-for 指令时，指定 key 是必不可少的。
  1. key的值只能是字符串或数字类型
  2. key的值必须具有唯一性( 即: key 的值不能重复)
  3. 建议把数据项id属性的值作为key的值( 因为id属性的值具有唯一性)
  4. 使用index的值当作key的值没有任何意义(因为index的值不具有唯一性)
  5. 建议使用v-for指令时一定要指定key的值( 既提升性能、又防止列表状态紊乱,)

 

Vue基础之指令与过滤器
fanlingfang的博客
11-06 875
ES6模块化 ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习AMD、CMD或CommonJS等模块化规范。 ES6模块化规范中定义: 每个js文件都是一个独立的模块 导入其它模块成员使用import 关键字 向外共享模块成员使用export关键字 p230 Promise async/await EventLoop 宏任务和微任务 API接口案例 前端工程化 实际的前端开发: 模块化(js的模块化、css的模块化、资源的模
vue基础学习复习笔记(一)，包括（vue基本概念、@vue/cli脚手架、vue指令、过滤器、计算属性、侦听器等基本概念）
weixin_60896381的博客
07-10 1398
本文包含 vue基础 等内容，参考于 黑马PPT 通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包括（vue基本概念、@vue/cli脚手架、vue指令、过滤器、计算属性、侦听器等基本概念） 如有做的不好的地方，敬请谅解，欢迎指出，持续更新改正.........
【vue】过滤器、响应式数据原理、key的原理
webxuj的博客
08-31 248
因为vue在刷新页面组件时,会把旧节点跟新vm节点做比较,如果要增加节点,并不会删除旧节点,而是复用，这样会导致节点跟数据没有绑定关系而重新渲染,用key可以将数据与节点绑定起来。然后就去刷新数据到界面: 按照for的数据容器中的数据顺序来渲染如果用户以前操作过旧节点,那么新数据顺序可能会出现跟旧节点顺序不匹配的效果(旧节点跟旧数据没有对应起来)如果数据多了,会在vm节点后面增加对应数量的节点,并不会重新创建所有节点,然后vm去更新对应的DOM。实例，它会在组件渲染的过程中把使用过的数据属性通过。...
key编程注意事项
谢绝(无视)留言与私信
08-27 970
<br /> //----------------------------------- //get public key if(CryptGetUserKey( m_hCSPProv, AT_SIGNATURE, &hKey)) { printf("The signature key has been acquired. /n"); } else { //这里不能调用GenKey, 要不导致重新生成公私钥对，把Key给毁了。
vue 实现使用Filter过滤扁平化数据，将对象中的key自定义展示
AaronLuo
08-04 1786
vue 中的filter用法 Vue.filter('parseData',(str) => { return str+'1' }) <div>{{ msg | parseData }}</div> 现在有以下需求，管理员现在向后台请求到一组数据，包括员工请假，员工出差等数据，需要在前台展示出所有类型，比如kind为businessTravel,那么sta...
对象的key 值注意事项
weixin_45677987的博客
05-12 227
上代码： 1:var a = {}, b = "123"; c = 123; a [b]= 'b'; a [c] = 'c'; console.log(a[b]); // c // =>c 因为： a["123"] <=> a[123] // 可以理解为一个对象当中所有的属性都是字符串 2：var a = {}; b = Symbol('123'), c = Symbol('123'); a[b] = 'b'...
key 的使用和原理注意的点
富在术数不在劳身,利在势局不在力耕。
12-01 777
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>key的原理</title> <script type="text/javascript" src="./vuebasic/vue.js"></script> </head> <body> <div id="root"> &lt.
Vue学习笔记（上）——包含指令、组件、生命周期等基本知识点.pdf
07-07
Vue实例配置中包含el（挂载点）、data（数据对象）、methods（方法）、components（子组件）、computed（计算属性）和filters（过滤器）等选项。其中，el用于指定挂载的DOM元素；data定义组件的数据；methods用于...
vue过滤器和修饰符(品牌管理案例)
weixin_48780364的博客
10-30 136
vue过滤器和修饰符(品牌管理案例)
Vue2的基础用法——Vue的指令
shhghvvh的博客
01-09 385
{{ }} ： vue提供的语法，专门用来解决v-text 会覆盖默认文本内容的问题。vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。指令(Directives)是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令。建议把数据项id属性的值作为key 的值（因为id属性的值具有唯一性)在vue中，可以使用v-bind:指令，为元素的属性动态绑定值;
Vue V-for和key属性
zzzlln的博客
01-05 467
遍历数组，参数(item,index) in list 遍历对象，参数(value,key,index) in list 遍历数字，num in 10 (1~10) key在使用v-for的时候都需要去设置key key 让界面元素和数组里的每个记录进行绑定 key只能是字符串或者数字 key必须是唯一的 ...
Vue当中v-for指令中关于:key的注意小点
qq_72760247的博客
10-11 482
Vue当中v-for指令中关于:key的注意小点
VUE学习(五)、列表渲染之：key原理、列表过滤、列表排序
醉瑾_的博客
01-02 983
VUE学习(五)——列表渲染之：key原理、过滤、排序 1、认识基本列表——v-for指令遍历列表 <!-- v-for指令: 1.用于展示列表数据 2.语法：v-for="(item, index) in xxx" :key="yyy" in 和 of 都是一样的 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少） --> <html> <head> <meta charset="UTF-8" /> <t
2021-05-28 vue使用filter过滤数组
weixin_53587375的博客
05-28 6329
在不使用计算属性的情况下，可以使用filter方法对数组进行过滤 例如 this.teachers = this.teachers.filter(function (teacher) { return !(teacher === ''); }); return的结果是一个布尔值，根据自己的实际情况设定条件即可！ 上述代码将teachers数组中的空值全部过滤掉了，但是filter并不会改变原有数组以及排序，因此如果需要反复使用过滤后的数组，需要将过滤后的返回值重新赋值给一个新的变量！ 过滤掉了 数组中每
Vue中对象如何新增、修改、删除、筛选属性key值
GongWei_的博客
01-22 1万+
1、新增属性以及修改value值 方法：this.$set(this.obj,‘key’,value) 或 var vm = new Vue({…}) vm.set(this.obj, “key”, value) var demo={a:"1",b:"2"} this.$set(demo,"c","3") console.log(demo)//{a:"1",b:"2",c:"3"} //如果对象中存在该key值，那么就不是新增属性，而是修改该key值的value值 this.$set(demo,"c","4
Vue基础-key,计算属性,过滤器,侦听器
Gik99的博客
03-02 426
Vue基础-key,虚拟dom,计算属性,过滤器,侦听器
vue过滤数组，返回新的数组
qq_39779284的博客
10-08 3390
let ids = this.cityall.filter(item => item.name ===1 && item.id); cityall：原数组， item.name ===1 && item.id：原数组中name值为1，并且有id 的返回到ids这个数组中 ...
Vue之key值的解读
qq_46772005的博客
05-16 1410
一、为什么会存在key值这个属性？ 当元素之间进行对比的时候，如果元素有key值，那么直接通过key值进行比较 二、key值的注意事项 1、一旦使用v-for指令，必须设置key值 2、如果key值设置的是index下标，并且添加数据时，不是逆序的，那么可以使用 3、key值建议使用ID 下面我用代码，解释为什么最好不要用index作为key的值 <!DOCTYPE html> <html lang="en"> <head> <meta ch
Vue之v-for循环中key属性注意事项
热门推荐
北海之灵的博客
08-11 4万+
当Vue用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。 为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类...
Vue3 Element Tree 空过滤器返回所有数据
最新发布
09-10
首先，用户的问题是在Vue3中使用Element组件库的Tree组件时，当使用过滤器（filter-method）时，如果过滤器返回空（即没有过滤条件时），如何让组件显示所有数据？用户引用了一些内容，但这些是站内引用，需要参考...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值