列表渲染指令 v-for
当需要将一个数组便利或者枚举一个对象循环显示时，就会用到列表渲染指令 v-for。
它的表达式需要结合in 来使用，类似于item in items的形式。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Vue内置指令</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="book in books">{{book.name}}</li>
</ul>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app= new Vue({
el:'#app',
data:{
books:[
{name:'《书本1》'},
{name:'《书本2》'},
{name:'《书本3》'}
]
}
})
</script>
</body>
</html>
在表达式中，books是数据，book是当前元素的别名，循环出的每个<li>元素内的元素都可以访问到
对应的当前数据book
列表渲染也支持用of 代替in 作为分隔符
<li v-for="book of books">{{book.name}}</li>v-for的表达式支持一个可选参数作为当前项的索引：
<div id="app">
<ul>
<li v-for="(book,index) in books">{{index}}-{{book.name}}</li>
</ul>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app= new Vue({
el:'#app',
data:{
books:[
{name:'《书本1》'},
{name:'《书本2》'},
{name:'《书本3》'}
]
}
})
</script>
除了数组外，对象的属性也是可以遍历的：
<div id="app1">
<ul>
<span v-for="value in user">{{value}}<br></span>
</ul>
</div>
var app1= new Vue({
el:'#app1',
data:{
user:{
name:'badao',
age:22,
tel:11111111
}
}
v-for还可以迭代整数：
<div id="app3">
<span v-for="n in 10">{{n}}</span>
</div>
var app3 = new Vue({
el:'#app3'
})
