使用v-for遍历数组对象
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用book in books形式的特殊语法，其中 books 是源数据数组，而 book 则是被迭代的数组元素的别名。具体操作如下代码
data:{
books:[
{
name:"三国演义",
author:"罗贯中"
},
{
name:"西游记",
author:"吴承恩"
},
{
name:"水浒传",
author:"施耐庵"
},
{
name:"红楼梦",
author:"曹雪芹"
}
]
}
<table border="1">
<!--第一行-->
<tr>
<td>循环下标</td>
<td>书名</td>
<td>作者</td>
</tr>
<!--books:要遍历的数组元素 book：每一个要遍历元素的别名，book想当于是book里面的每一个对象-->
<!--除了book，还可以加一个下标:index in也可以改成of-->
<!--v-for既可以遍历数组对象，也可以遍历普通对象-->
<tr v-for="(book,index) in books" v-bind:key="index">
<td>{{index}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
</tr>
</table>
循环数组对象浏览器显示如下
image.png
在
v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。
<tr v-for="(book,index) in books" v-bind:key="index">
<td>{{index}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
</tr>
使用v-for遍历单个对象
data:{
site:{
url:"https://lqgjava.github.io/",
name:"凌枫博客",
server:"github"
}
}
<div v-for="(s,p,index) in site" v-bind:key="index">{{s}}--{{p}}--{{index}}</div>
单个对象遍历浏览器显示如下
image.png
你也可以提供第二个的参数为 property 名称 (也就是键名)：下面代码的
p就是键名
<div v-for="(s,p,index) in site" v-bind:key="index">{{s}}--{{p}}--{{index}}</div>
数组更新检测
变异方法
Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()pop()shift()unshift()splice()sort()reverse()
你可以打开控制台，然后对前面例子的 books 数组尝试调用变异方法。比如 app.books.push({name:"斗破苍穹",author:"天蚕土豆"})。
image.png
