7 列表渲染（v-for）
v-for {{key}}是：{{value}} 循环到第{{i}}次了 字符串： {{i}} 二、key值的解释 vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法） 案例：通过 索引值 更新数组（数据会更新，但是页面不会发生改变）
遍历数组(列表)： # book是循环到的对象，index是数组的索引
对象(字典)：
数字：一、列表渲染
v-for遍历数组(列表)、对象(字典)、数字
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div class="app">
<button @click="handleClick">刷新购物车button>
<table border="1">
<tr>
<td>顺序td>
<td>图书名字td>
<td>价格td>
<td>出版社td>
tr>
<tr v-for="(book,index) in book_list">
<td>{{index+1}}td>
<td>{{book.name}}td>
<td>{{book.price}}td>
<td>{{book.publish}}td>
tr>
table>
<hr>
<h2>循环对象h2>
<p v-for="(value,key) in person">{{key}}是：{{value}}p>
<hr>
<h2>循环数字h2>
<p v-for="i in 5">循环到第{{ i}}次了p>
<hr>
<h2>循环字符串h2>
<p v-for="i in 'asfdasdsdaf'">{{i}}p>
div>
body>
<script>
var vm = new Vue({
el: '.app',
data: {
book_list: [],
person: {name: '彭于晏', age: 34, height: 169}
},
methods: {
handleClick() {
this.book_list = [{name: '水浒传', price: 100, publish: '北京出版社'},
{name: '西游记', price: 12, publish: '北京出版社'},
{name: '三国演义', price: 55, publish: '南京出版社'},
{name: '封神榜', price: 99, publish: '上海出版社'},
]
}
}
})
script>
html>
v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一:key="变量"三、数组更新与检测
可以检测到变动的数组操作：
push：最后位置添加
pop：最后位置删除
shift：第一个位置删除
unshift：第一个位置添加
splice：切片
sort：排序
reverse：反转
检测不到变动的数组操作：有的时候，数组（对象）变了，但是页面没变，作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）
filter()：过滤
concat()：追加另一个数组
slice()：
map()：
原因：
作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）
解决方法：
// 方法1：通过 索引值 更新数组（数据会更新，但是页面不会发生改变）
vm.arrayList[0]
"Alan"
vm.arrayList[0]='Darker'
"Darker"
// 方法2：通过 Vue.set(对象, index/key, value) 更新数组（数据会更新，页面也会发生改变）
Vue.set(vm.arrayList, 0, 'Darker')
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div class="app">
<button @click="handleClick">点我，改0位置的值button>
<p v-for="item in l1">元素为：{{item}}p>
div>
body>
<script>
var vm = new Vue({
el: '.app',
data: {
l1: [1, 2, 3],
},
methods: {
handleClick() {
// this.l1.push(4) 页面内容会变，但是有的数组变了，页面不会变
// this.l1=this.l1.concat(this.l2) // 不会更改原数组，返回一个数组
// console.log(this.l1)
// this.l1[0] = 999 //不会改变
Vue.set(this.l1,0,999) // 触发更新，触发页面的变化
}
}
})
script>
html>
当点击按钮时，触发this.l1[0] = 999，原值改变，但是页面没有变化
Vue.set(this.l1,0,999)