当你在Vue.js中使用v-for
指令时,你可以很方便地遍历数组或对象,并为其生成相应的DOM元素或组件实例。这个指令可以用在<template>
标签、组件或DOM元素上。
遍历数组
在v-for的语法(item,index) in arr
,item是数组的每一项,index是数组的下标。index可以省略,只有item还可以省略括号
假设你有一个数组:
javascriptCopy
data: {
arr: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
}
你可以使用v-for
来遍历这个数组,并为每个元素创建一个DOM元素:
htmlCopy
<ul>
<li v-for="item in arr" :key="item.id">
{{ item.name }}//拿到数组的name
</li>
</ul>
遍历对象的属性
如果你有一个对象:
javascriptCopy
data: {
user: {
name: 'John',
age: 30,
email: 'john@example.com'
}
}
你可以使用v-for
来遍历对象的属性:
htmlCopy
<ul>
<li v-for="(value, key) in user" :key="key">
{{ key }}: {{ value }}
</li>
</ul>
使用v-for
的语法
v-for="item in arr"
:遍历数组,item
为当前遍历到的元素(一般我们是用不到它的下标属性)。v-for="(value, key) in object"
:遍历对象,value
是属性值,key
是属性名。
在使用v-for
时,务必为每个遍历的项目提供一个唯一的:key
,这有助于Vue更高效地渲染DOM,并在数据变化时追踪每个节点的身份。
v-for
是Vue.js中非常强大和灵活的指令,可以用于各种循环渲染的场景,使得数据驱动的UI渲染变得更加简单和直观。
结合之前学的来一个小实战
渲染数组的每一项,在每一项后面加上删除键,可以任意删除其中的每一项。
js
<body>
<div id="app"></div>
<template id="my-app">
<h3>黑子书架</h3>
<ul>
<li v-for="(item,index) in booklist">
<span>{{item.name}}</span>
<span>{{item.author}}</span>
<!-- 通过id来删除 -->
<button @click="foo(item.id)":key="item.id">删除</button> <!-- 取到数组的id -->
</li>
</ul>
</template>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
template:'#my-app',
data(){
return{
booklist:[
{id:1,name:'《红楼梦》',author:'曹雪芹'},
{id:2,name:'《西游记》',author:'吴承恩'},
{id:3,name:'《水浒传》',author:'施耐庵'},
{id:4,name:'《三国演义》',author:'罗贯中'}
]
}
},
methods:{
foo(id){
this.booklist=this.booklist.filter(item=>item.id!==id)
}
}
})
app.mount('#app')
</script>
</body>
注意
当在Vue的v-for
循环中加上key
属性,它帮助Vue更准确地追踪和管理每个循环项的变化。
没有key
时,Vue会默认使用索引来管理这些项,但有时候这可能导致一些渲染问题,特别是在项重新排序、添加或删除时。
加上key
能让Vue更好地识别和跟踪每个项的变化,避免意外的渲染行为,并提高性能。
简述一下
如果将上面的每一项都渲染到页面数,给其中一个li加上背景色,如果没有key,背景色不会在该被li删除后消失,反而会被复用。
有key那么背景色会随着该li一起消失而不被复用。