Vue自学：v-for-绑定和非绑定key的区别 - vue

首页 > 博客列表 > Vue自学：v-for-绑定和非绑定key的区别

博主信息

博文 250

粉丝 3

访问量 370687

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

Vue自学：v-for-绑定和非绑定key的区别

梁凯达的博客

原创

1056人浏览过

<!DOCTYPE html>

<html lang="zh">
<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">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>v-for-绑定和非绑定key的区别</title>
</head>
<body>
<div id="app">
<ul>

<li v-for="(item,index) in arr" :key="item">{{item}}—{{index}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
//官方推荐我们在使用v-for的时候，给对应的元素或者组件添加上一个:key属性
//当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点
//假如数组如下arr:[‘A’,’B’,’C’,’D’,’E’]
//我们希望可以B和C之间插入一个F
//触发的diff算法默认执行是：C更新为F，D更新为C，E更新为D，最后再插入E，因此十分没有效率
//Vue推荐我们使用:key给每个节点做唯一性的标识
//当有了新的标识之后，vue的diff算法就能够正确的识别这个节点
//之后找到正确的位置插入新的节点
//重点：key的作用主要是为了高效的更新虚拟DOM
let app = new Vue({
el:’#app’,
data:{
arr:[‘A’,’B’,’C’,’D’,’E’],
},
})
</script>
</html>