先看一个简单的v-for循环:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueBaseCode</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="i in 10">这是第{{i}}次循环</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
输出结果是:
这里注意两点, 一个是虽然这个循环里面没有用到Vue对象vm中的任何数据,但是这个vm对象是必须有的,因为vm对象通过"#app"才能控制id为'app'的div内的内容。第二个是这个i的值是从1开始的,不是0。
再看一个数组输出给p元素的原始写法:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueBaseCode</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{list[0]}}</p>
<p>{{list[1]}}</p>
<p>{{list[2]}}</p>
<p>{{list[3]}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list:['比亚迪','蔚来','小鹏','理想']
},
methods: {}
});
</script>
</body>
</html>
此时输出的结果是:
这里我们使用v-for的基本写法改造一下div内的p元素:
html
<div id="app">
<p v-for="item in list">{{item}}</p>
</div>
此时,我们能够得到和上面相同的结果。
这里我们再让p输出索引值,写法如下:
html
<div id="app">
<p v-for="(item,i) in list">索引:{{i}}_品牌:{{item}}</p>
</div>
此时输出结果如下:
对象遍历参考如下:
html
<body>
<div id="app">
<p v-for="(car,i) in list">索引:{{i}}_品牌:{{car.brand}}_型号:{{car.model}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [
{ brand: '比亚迪', model: '元PLUS' },
{ brand: '蔚来', model: 'EC6' },
{ brand: '小鹏', model: 'P7' },
{ brand: '理想', model: 'L8' }
]
},
methods: {}
});
</script>
</body>
输出结果如下:
需要注意的是,在下面这一行中
html
<p v-for="(car,i) in list">索引:{{i}}_品牌:{{car.brand}}_型号:{{car.model}}</p>
在(car,i)里面谁表示对象,谁表示索引与名称无关,只与位置有关,如果写成(i,car),那么i就是对象,car就是索引,前面的写法只是因为我们通常习惯用i指代索引,所以才写成(car,i)。