v-for的语法格式：
语法格式：v-for=(item, index) in items ，其中的index就代表了取出的item在原数组的索引值。
v-for中的组件的key属性：
官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。 为什么需要这个key属性呢？
这个其实和Vue的虚拟DOM的Diff算法有关系。 这里我们借用React’s diff algorithm中的一张图来简单说明一下：
当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点 我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。 即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？ 所以我们需要使用key来给每个节点做一个唯一标识 Diff算法就可以正确的识别此节点 找到正确的位置区插入新的节点。 所以一句话，key的作用主要是为了高效的更新虚拟DOM。
响应式数组更新
因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
总结下来一共有7种方式。push（）、pop（）、shift（）、unshift（）、splice（）、sort（）、reverse（）。
1.我们先来说下push方法，在数组最后添加相应的元素。看如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnclick">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
letters:["a","b","c"]
},
methods:{
btnclick(){
this.letters.push('111',"222")
}
}
})
</script>
</body>
</html>
2.pop方法，删除数组中的最后一个元素，实例如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnclick">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
letters:["a","b","c"]
},
methods:{
btnclick(){
this.letters.pop()
}
}
})
</script>
</body>
</html>
3.shift方法，删除数组中的第一个元素，实例如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnclick">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
letters:["a","b","c"]
},
methods:{
btnclick(){
this.letters.shift()
}
}
})
</script>
</body>
</html>
4.unshift方法，在数组最前面添加元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnclick">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
letters:["a","b","c"]
},
methods:{
btnclick(){
this.letters.unshift("l","j","y")
}
}
})
</script>
</body>
</html>
5.splice方法。splice具体有三种作用，分别为删除元素、替换元素与插入元素。
1.删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
2.替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
3.插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnclick">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
letters:["a","b","c"]
},
methods:{
btnclick(){
// this.letters.splice(1) 删除元素
// this.letters.splice(1,1,"ljy") 替换元素
// this.letters.splice(1,0,"aaa","bbb") 插入元素
}
}
})
</script>
</body>
</html>
6.sort方法。sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnclick">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
letters:["cat","bat","ate"]
},
methods:{
btnclick(){
this.letters.sort()
}
}
})
</script>
</body>
</html>
7.reverse方法。reverse() 方法用于颠倒数组中元素的顺序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnclick">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
letters:["cat","bat","ate"]
},
methods:{
btnclick(){
this.letters.reverse()
}
}
})
</script>
</body>
</html>