vue - 循环遍历

一. 遍历数组

data: {
        moives: ['奥特曼', '进击的巨人', '鲁路修', '夏目']
      }

1. 在遍历过程中没有使用索引值（下标值）

<ul>
	<li v-for='item in moives'>{{item}}</li>
</ul>

2. 在遍历过程中获取索引值

<ul>
	<li v-for='(item,index) in moives'>{{index+1}} . {{item}}</li>
</ul>

二. 遍历对象

data(){
	info:{
		one:'鲁路修',
		two:'夏目',
		three:'进击的巨人',
		four:'黑执事'
	}
}

1. 在遍历对象时，如果只获取一个值，获取到的是value

<ul>
	<li v-for='value in info'>{{value}}</li>
</ul>

2. 同时获取key和value的格式：(value,key)

<ul>
	<li v-for='(value,key) in info'>{{value}}--{{key}}</li>
</ul>

3. 同时获取key和value和index的格式：(value,key,index)

<ul>
	<li v-for='(value,key,index) in info'>{{value}}--{{key}}--{{index}}</li>
</ul>

三. v-for绑定和非绑定key的区别

官方推荐我们使用v-for时给对应的元素或数组添加一个:key属性。
使用v-for时需要:key属性是Vue的虚拟DOM的diff算法有关系。
如图当我们想在c和d之间加个e时，diff算法默认执行起来是把d更新成z，把e更新成d，最后再插入e，非常没有效率。
所以我们需要key来给每一个节点做一个唯一标识，这样diff算法就可以正确识别此节点，找到正确位置直接插入新的节点。
key的作用主要是为了高效的更新虚拟DOM。

<ul>
<!-- :key绑定的必须具有唯一性，不能是index，因为index可以改变 -->
	<li v-for='item in movies' :key='item'>{{item}}</li>
</ul>

四. 数组中哪些方法是响应式的

响应式方法

data: {
          letters: ["a", "b", "c", "d", "e"]
        },

1. push方法：在数组的末尾添加元素

this.letters.push("aaa");
this.letters.push("aaa,bbb,ccc")

2. pop方法：删除数组中最后一个元素

this.letters.pop();

3. shift方法：删除数组中第一个元素

this.letters.shift();

4. unshift方法：在数组最前面添加元素

this.letters.unshift("aaa");
this.letters.unshift("aaa,bbb,ccc");

5. splice方法：删除元素/替换元素/插入元素

删除元素：第一个参数是从第几个元素开始删除，第二个参数是要删除几个元素，如果没有传入第二个参数就是删除第一个参数后面的所有元素

//删除第二个元素后一个元素
this.letters.splice(2,1)

//删除第二个元素后所有元素
this.letters.splice(2);

替换元素：第二个参数传入要替换几个元素，后面是用于替换的元素

this.letters.splice(2,3,'r','t','o');

也可以理解为：第二个参数是要删除的元素，后面是要重新添加的元素

this.letters.splice(2,3,'r','t');

插入元素：第二个参数传入0，后面跟上要插入的元素

this.letters.splice(2,0,"w", "r");

6. sort方法：排序

this.letters.sort();

7. reverse方法：翻转

this.letters.reverse();

非响应式方法

通过索引值修改数组中的元素

this.letters[0]="bbb";

如果想要实现此功能，可以使用splice方法

this.letters.splice(0,1,'bbb');

也可以使用vue的set方法

vue.set(要修改的对象，索引值，修改后的值);
vue.set(this.letters,0,'bbb');