Blogger Information
Blog 250
fans 3
comment 0
visits 321168
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Vue自学:v-for-绑定和非绑定key的区别
梁凯达的博客
Original
907 people have browsed it

<!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>
<!-- :key作为唯一标识,推荐使用item 因为item与后面遍历出来的内容对应 由于item有可能重复,因此当重复的时候,就会有浏览器报错 -->
<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>

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post