VUE学习笔记(入门)15__vue指令v-for中:key的应用-优快云博客

本文链接：https://blog.youkuaiyun.com/houmenghu/article/details/145228341

在这里插入图片描述

<!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
在这里插入图片描述