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

最新推荐文章于 2022-10-11 09:54:13 发布
最新推荐文章于 2022-10-11 09:54:13 发布
阅读量398 收藏
点赞数 2
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cider_m/article/details/122917969
版权
  1. key的值只能是字符串或数字类型
  2. key的值必须具有唯一性( 即: key 的值不能重复)
  3. 建议把数据项id属性的值作为key的值( 因为id属性的值具有唯一性)
  4. 使用index的值当作key的值没有任何意义(因为index的值不具有唯一性)
  5. 建议使用v-for指令时一定要指定key的值( 既提升性能、又防止列表状态紊乱,)

 

代码搬运工的小马
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【vue】过滤器、响应式数据原理、key的原理
webxuj的博客
08-31 181
因为vue在刷新页面组件时,会把旧节点跟新vm节点做比较,如果要增加节点,并不会删除旧节点,而是复用，这样会导致节点跟数据没有绑定关系而重新渲染,用key可以将数据与节点绑定起来。然后就去刷新数据到界面: 按照for的数据容器中的数据顺序来渲染如果用户以前操作过旧节点,那么新数据顺序可能会出现跟旧节点顺序不匹配的效果(旧节点跟旧数据没有对应起来)如果数据多了,会在vm节点后面增加对应数量的节点,并不会重新创建所有节点,然后vm去更新对应的DOM。实例，它会在组件渲染的过程中把使用过的数据属性通过。...
key编程注意事项
谢绝留言与私信
08-27 835
<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 1700
vue 中的filter用法 Vue.filter('parseData',(str) => { return str+'1' }) <div>{{ msg | parseData }}</div> 现在有以下需求，管理员现在向后台请求到一组数据，包括员工请假，员工出差等数据，需要在前台展示出所有类型，比如kind为businessTravel,那么sta...
对象的key 值注意事项
weixin_45677987的博客
05-12 163
上代码： 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 694
<!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中的v-for循环key属性注意事项小结
12-10
当Vue用 v-for 正在更新...在下面这个例子中，如果不给 p 元素绑定key，我先选中第一个， 然后输入ID和Name，点击添加按钮之后，就会出现如下这种情况，刚添加的元素被选中。如果绑定了key属性，则不会出现这种情况。
vue 指令和过滤器的基本使用(品牌管理案例)
10-16
主要介绍了vue-品牌管理案例-指令和过滤器的相关知识，文中通过代码给大家介绍了过滤器的基本使用,需要的朋友可以参考下
Vuejs入门教程之Vue生命周期，数据，手动挂载，指令，过滤器
10-20
在本文中，我们将深入探讨Vue.js的基础概念，包括Vue实例的生命周期、数据绑定、手动挂载、指令以及过滤器。 1. **Vue实例的生命周期**： Vue实例从创建到销毁的过程称为生命周期。包括`beforeCreate`、`created`...
Vue V-for和key属性
zzzlln的博客
01-05 367
遍历数组，参数(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 386
Vue当中v-for指令中关于:key的注意小点
VUE学习(五)、列表渲染之：key原理、列表过滤、列表排序
醉瑾_的博客
01-02 893
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 6043
在不使用计算属性的情况下，可以使用filter方法对数组进行过滤 例如 this.teachers = this.teachers.filter(function (teacher) { return !(teacher === ''); }); return的结果是一个布尔值，根据自己的实际情况设定条件即可！ 上述代码将teachers数组中的空值全部过滤掉了，但是filter并不会改变原有数组以及排序，因此如果需要反复使用过滤后的数组，需要将过滤后的返回值重新赋值给一个新的变量！ 过滤掉了 数组中每
Vue中对象如何新增、修改、删除、筛选属性key值
GongWei_的博客
01-22 9515
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过滤数组，返回新的数组
qq_39779284的博客
10-08 3259
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 1331
一、为什么会存在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不推荐用全局变量_为什么说 Vue 中不建议用 index 作为 key？（diff 算法详解）...
weixin_36071064的博客
01-31 358
前言Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。示例以这样一个列表为例：<li>1li><li>2li>ul>那么它的 vnode 也就是虚拟 dom 节点大概是这样的。{tag:'ul',children:[{tag:'li',ch...
vue 实现数组筛选功能 filter过滤
weixin_42684880的博客
07-14 8518
相信小伙伴们都写过数组过滤吧。在某一个列表上面，有一个input框，搜索列表中的某个值，来进行筛选。 我们可以利用数组的filter方法来实现。 注: v_tableList: 列表需要的数据 v_filterKeyword: 搜索框双向绑定的key v_detailList: 后台拿的数据 computed: { v_tableList () { if (this.v_filterKeyword !== '') { let keyword = this.v_filt
Vue中过滤器的使用和注意事项
qq_39055970的博客
05-25 777
vue中过滤器的使用什么是过滤器过滤器的使用格式语法全局过滤器1、无参数用法2、带参数用法3、多个过滤器嵌套使用4、全局过滤器的好处私有过滤器1、语法2、就近原则3、注意点 什么是过滤器 概念：vue.js允许你自定义过滤器，可用于一些常见的文本格式化。过滤器可以使用在2个地方：mustache插值和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。 过滤器的使用 格式 调用过滤器时的格式：{{name | 过滤器的名称}} 语法 过滤器的定义语法： Vue.filt
Vue中key的作用及原理
热门推荐
cun的博客
10-11 2万+
在vue中key的作用是什么？实现原理是什么？如果不写会怎么样？
vue 使用过滤器获取json对象的key
最新发布
09-10
可以通过Vue.js的过滤器和Object.keys()方法来获取JSON对象的key。首先在Vue实例中定义一个过滤器，例如： ``` Vue.filter('keys', function(obj) { return Object.keys(obj); }); ``` 然后在模板中使用这个过滤...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值