本文主要是介绍Vue-列表渲染指令,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
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
这篇关于Vue-列表渲染指令的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!