AI绘画新突破：视觉条件扩散模型实现所见即所得
2026/7/26 2:51:11
v-for
基于数据循环，多次渲染整个元素
基于的数据：数组、对象、数字…
因为在实际开发当中，对象、数字运用的场景较少，常用的为数组
使用样式
遍历数组语法
渲染给需要多次使用的标签
v-for="(item,index)" in '数组'其中
item指的时便利的每一项，index指的是数组的下标
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>v-for的使用</title></head><body><divid="app"><h3>小黑水果店</h3><ul><liv-for="(item, index) in list">{{ item }}</li></ul></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>newVue({el:'#app',data:{list:['苹果','香蕉','橙子','葡萄','水蜜桃']}})</script></body></html>在上述“小黑水果店示例’代码中，只使用了item属性，源代码可以修改为
<li v-for=item in list>{{ item }}</li>
小黑的书架案例
利用v-for实现列表渲染、v-on函数实现filter删除功能
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>小黑书架案例</title></head><body><divid="app"><h3>小黑的书架</h3><ul><liv-for="(item,index) in Booklist":key="item.id"><span>{{ item.name }}</span><span>{{ item.author }}</span><!-- 删除可以通过数组下标以及id删除，但最好使用id删除，id是唯一的 --><button@click="del(item.id)">删除</button></li></ul></div><scriptsrc="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script><script>newVue({el:'#app',data:{Booklist:[{id:1,name:'《红楼梦》',author:'曹雪芹'},{id:2,name:'《西游记》',author:'吴承恩'},{id:3,name:'《三国演义》',author:'罗贯中'},{id:4,name:'《水浒传》',author:'施耐庵'}]},methods:{del(id){console.log('删除id为',id),// 根据id在数组中删除元素->filter// filter:根据条件仅保留满足条件的元素，得到一个新数组，不改变原数组this.Booklist=this.Booklist.filter(item=>item.id!==id)}}})</script></body></html>v-for中的key
语法
key属性=‘唯一标识’
作用
给列表项添加唯一标识。便于Vue进行列表项的正确排序复用
下面是对使用key与未使用key时的场景的分别说明
在代码中添加key时页面呈现的效果
<li v-for="(item,index) in Booklist" :key="item.id">
key相当于给列表中的每一个li添加了唯一的标识
不在代码中添加key时页面呈现的效果
<li v-for="(item,index) in Booklist">
没有给li添加唯一的标识时，v-for的默认行为会尝试原地修改内容（就地复用）
综上来看，在使用v-for的时候应该在代码中使用key属性=‘唯一标识’
使用key的注意点
key的值只能是字符串或者数字类型key的值必须具有唯一性- 推荐使用
id作为key（唯一），不推荐使用index作为key（会变化，产生不对应的效果）