VUE学习笔记(入门)15__vue指令v-for中:key的应用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h3>小黑书架</h3>
<ul>
<li v-for="(item,index) in bookslist" :key="item.id">
<span>{{item['name']}}</span>
<span>{{item['author']}}</span>
<button @click="del(item['id'])">删除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
bookslist: [
{id: 1, name:'《红楼梦》', author:'曹雪芹'},
{id: 2, name:'《西游记》', author:'吴承恩'},
{id: 3, name:'《水浒传》', author:'施耐庵'},
{id: 4, name:'《三国演义》', author:'罗贯中'}
]
},
methods:{
del(id){
this.bookslist=this.bookslist.filter(function(item){return item.id !== id})
}
}
})
</script>
</body>
</html>
打开网页并且给第一行的li设置属性background:pink
此时删除会直接删除第一行的li
如果没有设置:key=‘’item.id‘’
删除后的效果会是这样
这是因为key指定了当前li的唯一标识，删除时会按照唯一标识直接删除li整体
如果没有指定唯一标识，会直接替换其中的内容，不会删除对应的li
原文地址：https://blog.csdn.net/houmenghu/article/details/145228341
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！