v-for item
时间: 2023-11-05 21:57:28 浏览: 39
v-for指令是Vue.js框架中用于循环渲染的指令。通过v-for可以基于一个数组或对象来渲染一个列表。在v-for中,我们使用特殊的语法`item in items`来指定要循环的数据和循环变量的别名。
举例来说,在一个数组中使用v-for,可以这样写:
```
<div id="app">
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
arr:["出去玩","在家玩","学习"]
}
})
</script>
```
在上面的例子中,v-for指令将会把数组`arr`中的每一项作为循环变量`item`进行渲染,最终生成一个包含数组元素的列表。
除了循环变量,v-for还支持一个可选的第二个参数,即当前项的索引。在数组中,可以使用`v-for="(item, index) in items"`的语法来同时获取循环变量和索引。
举例来说,在数组中使用v-for并获取索引,可以这样写:
```
<div id="app">
<ul>
<li v-for="(item , index) in arr">{{item}}:{{index}}</li>
</ul>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
arr:["出去玩","在家玩","学习"]
}
})
</script>
```
在上面的例子中,v-for指令将会把数组`arr`中的每一项作为循环变量`item`进行渲染,同时获取循环变量的索引`index`,最终生成一个包含数组元素和索引的列表。