vue中的循环可以直接通过指令:v-for来进行,示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的循环</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul v-for="(todo,i) in todos">
<p>您要做的第{{i+1}}件事是:{{todo.text}}</p>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
todos: [
{
text: '学习JavaScript'
},
{
text: '学习Vue'
},
{
text: '整个牛X项目'
}
]
}
})
</script>
</html>
页面效果如下:
备注:
如果期待获取循环的索引:指令后面的值除了元素,在添加一个参数index就行
v-for="(todo,i) in todos"
但是需注意,改索引是从0开始计算的