vue2中v-for主要是用来遍历和通过数据多次渲染页面。
语法:v-for="(item,index) in 数组名"
例如我们执行以下代码:
<!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>
<ul class="first">
<li v-for="(item,index) in list">{{index+1}}---{{item.name}}</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const div = new Vue({
el: 'ul',
data: {
list: [
{ id: 0, name: '《水浒传》' },
{ id: 1, name: '《三国志》' },
{ id: 2, name: '《西游记》' },
{ id: 3, name: '《红楼梦》' },
{ id: 4, name: '《骆驼祥子》' },
{ id: 5, name: '《围城》' },
{ id: 6, name: '《狂人日记》' },
]
}
})
</script>
</body>
</html>
我们通过v-for多次渲染<li></li>标签,因为list中有七条数据,所以渲染出了七个<li></li>,里面通过插值表达式{{index+1}}得到数组下标加1作为序号,然后再通过{{item.name}}拿到书名,执行结果如下:
我们再执行如下代码,加深理解:
<!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>
<ul class="first">
<li v-for="item in 9">{{item}}</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const div = new Vue({
el: 'ul',
data: {
}
})
</script>
</body>
</html>
我们通过v-for多次渲染<li></li>标签,因为9中有9个数据,所以渲染出了9个<li></li>,里面通过插值表达式{{item}}拿到数字1-9,执行结果如下: