Vue-列表渲染指令

最新推荐文章于 2024-07-06 16:47:02 发布

7_35Durant

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量716

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Kevin7_35Durant/article/details/139896783

版权

v-for

语法：v-for="(参数1,可选参数1,可选参数2) in 数组名"

参数1是元素，也是这个数组

如果可选参数只写一个，那么这个可选参数就是数组的索引，

如果可选参数写两个，那么第一个可选参数是键值对，第二个可选参数是索引

它会渲染依次渲染数组里面的属性

数组有几个元素，这里面li标签就会渲染多少个

<body>
    <div id="app">
     <input type="text" v-model="name">
     <p><button @click="adduser">添加</button></p>
     <ul>
      <li v-for="(n,i) in List">
      <input type="checkbox" >
        姓名:{{n.name}} </li>
     </ul>
    </div>
<script>
  const vm={
    data(){
      return{  
        //建立一个名叫List的数组
       List:[{name:'zhangsan',id:1},
             {name:'lisi',id:2},
             {name:'wang',id:3},
       ],
       name:'',
       nextid:4
      }
    },
    methods:{
        adduser(){
         this.List.unshift({name:this.name , id:this.nextid}),
         this.name='',
         this.nextid++
      }
    }
  }
  const app=Vue.createApp(vm)
  app.mount('#app')
</script>
  
</body>

这里面有一个小问题，就是当我勾选这个多选框时，再添加一个人

比如我想再添加一个叫‘moli’的人，你会发现多选框自己给勾上了，并且‘zhangsan’没有被勾上了，这是因为vue默认li标签里的元素内容没有变化，只是添加了一个元素

v-for中的key

这个时候key的作用就体现出来了，key的值必须要是唯一的关键字

因为数组里面的id是唯一的，不重复，所以用这个值给key

 <li v-for="(n,i) in List" :key="n.id">

此时，我们再添加‘moli’，就不会出现这个bug

7_35Durant

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue-列表渲染指令

比如我想再添加一个叫‘moli’的人，你会发现多选框自己给勾上了，并且‘zhangsan’没有被勾上了，这是因为vue默认li标签里的元素内容没有变化，只是添加了一个元素。语法：v-for="(参数1,可选参数1,可选参数2) in 数组名"这个时候key的作用就体现出来了，key的值必须要是唯一的关键字。这里面有一个小问题，就是当我勾选这个多选框时，再添加一个人。因为数组里面的id是唯一的，不重复，所以用这个值给key。此时，我们再添加‘moli’，就不会出现这个bug。
复制链接

扫一扫