v-for 指令为 vue 中的循环标签，用来根据数组循环创建元素。非常重要，一定要掌握。下面将逐一介绍：
vue 中 可以使用 v-for="value of datas" 或者 v-for="value in datas" 指令去迭代数组。实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 可以使用 v-for="todo of todos" 去替代 -->
<p v-for="todo in todos">
{{ todo }}
</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
todos: ["洗衣服", "做饭", "扫/拖地"]
}
})
</script>
</body>
</html>输出：
<p>洗衣服</p> <p>做饭</p> <p>扫/拖地</p>
迭代数组，我们可以获取数组的下标索引值。v-for 指令提供了获取下标的方法，如下：
<p v-for="(todo, index) in todos">
{{ index + ' - ' + todo.text }}
</p>数组中不仅可以存放基础数据，还能存放一个个对象。下面实例将演示，在数据中存放对象。然后使用 v-for 注意迭代，获取对象的值：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="todo in todos">
{{ todo.text }}
</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '学习 SpringBoot' }
]
}
})
</script>
</body>
</html>输出：
<p>学习 JavaScript</p> <p>学习 Vue</p> <p>学习 SpringBoot</p>
v-for 指令不仅仅能够迭代数组，而且还能迭代对象。获取对象中每个属性的key 和 value，实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 此处的 todo 是一个对象，我们可以再 {{}} 中使用点 "." 进行获取 -->
<p v-for="value in user">
{{value}}
</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
user: {
id: 10000,
name: 'Helen',
sex: 'male',
email: 'helen@qq.com'
}
}
})
</script>
</body>
</html>输出：
<p>10000</p> <p>Helen</p> <p>male</p> <p>helen@qq.com</p>
上面实例中，我们 v-for 指令返回的是一个对象，需要使用 obj.key 的方式去获取值。假如我们需要去获取 key，该怎么处理呢？可使用 v-for="(value, key) in user" 指令去获取对象的每个属性和值。实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="(value, key) in user">
{{key + ' = ' + value}}
</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
user: {
id: 10000,
name: 'Helen',
sex: 'male',
email: 'helen@qq.com'
}
}
})
</script>
</body>
</html>输出：
<p>id=10000</p> <p>name=Helen</p> <p>sex=male</p> <p>email=helen@qq.com</p>
v-for还有另一种用法，即可以循环数字，使用 v-for="value in 4" 指令。实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="value in 4">
{{value}}
</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {}
})
</script>
</body>
</html>输出：
<p>1</p> <p>2</p> <p>3</p> <p>4</p>
川公网安备51010802032098
