5.v-for

1.语法格式：

注：item获得的都是值而不是下标

遍历数组：
1. v-for="item in items"
2. v-for="(item, index) in items"
遍历对象：
1. v-for="item in items"
2. v-for="(item, key) in items"
3. v-for="(item, key, index) in items"

2.v-for中添加key

　　添加key有利于复用，并且希望key为唯一的（希望像Java中的UUID类型），一般不用index，这是根据虚拟DOM的渲染机制算法决定的。

1 <div id="vue">
2     <li v-for="(item, index) in items" key="item">
3         {{item.message}}{{index}}
4     </li>
5 </div>

3.数组中那些方法是响应式的

　　响应式：操作数据会让视图发生对应的更新

push
pop
shift
unshift
splice
sort
reverse

非常常用的方法为splice

splice作用：删除、添加和替换元素

参数1：从哪里开始删除
参数2：删除多少个
参数3：添加哪些元素

this.letters.splice(1,0,'x','y','z') //从位置1开始删除0个再插入x,y,z 
this.letters.splice(1,3,'m','n,'l') //从位置1开始删除3个再插入m,n,l 
this.letters.splice(1,3) //从位置1开始删除3个

直接对数组操作不会没有响应式但的确改变了数组内容：

this.letters[0] = 't'

可以使用Vue自带的方法实现修改响应

//set(要修改的对象,索引值,修改后的值)
Vue.set(this.letters, 0, 'bbbb')

4.让列表中的某一个<li>响应事件

让某一个<li>点击后变红，其他都没有颜色

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .active{
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13 <div id="vue">
14     <ul>
15         <li v-for="(item, index) in movies"
16             :class="{active: currentIndex === index}"
17             @click="liClick(index)">
18             {{index}}-{{item}}
19         </li>
20     </ul>
21 </div>
22 
23 <!--导入Vue.js-->
24 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
25 <script type="text/javascript">
26     let vm = new Vue({
27         el: '#vue',
28         data: {
29             movies: ['a','b','c','d'],
30             currentIndex: -1
31         },
32         methods: {
33             liClick(index){
34                 this.currentIndex = index;
35             }
36         }
37 
38 
39     });
40 </script>
41 </body>
42 </html>