08 vue中的循环遍历及数组的补充

循环遍历

1、v-for遍历数组

<div id=app>
  <ul>
  	<li v-for="item in names">{{item}}</li>
  </ul>
</div>
<script src = "../js/vue.js"></script>
<script>
  const app = new vue({
    el : "#app",
    data : {
      names : ['fdg','kobe'，'james','curry'],
    },
  })
</script>

在遍历过程中获取索引值：

<div id=app>
  <ul>
  	<li v-for="(index,item) in names">{{index+1}}.{{item}}</li>
  </ul>
</div>
<script src = "../js/vue.js"></script>
<script>
  const app = new vue({
    el : "#app",
    data : {
      names : ['fdg','kobe'，'james','curry'],
    },
  })
</script>

2、v-for遍历对象

在遍历对象的过程中，如果只获取一个值，那么获取到的是value（就是fdg、22、1.83）

<div id=app>
  <ul>
  	<li v-for = "item in info">{{item}}</li>
  </ul>
</div>
<script src = "../js/vue.js"></script>
<script>
  const app = new vue({
    el : "#app",
    data : {
      info : {
        name : "fdg",
        age : 22,
        height : 1.83,
      }
    },
  })
</script>

获取key和value 格式：（value，key）

<div id=app>
  <ul>
  	<li v-for = "(value,key) in info">{{value}}-{{key}}</li>
  </ul>
</div>
<script src = "../js/vue.js"></script>
<script>
  const app = new vue({
    el : "#app",
    data : {
      info : {
        name : "fdg",
        age : 22,
        height : 1.83,
      }
    },
  })
</script>

获取key和value和index 格式：（value，key，index）

<div id=app>
  <ul>
  	<li v-for = "(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
  </ul>
</div>
<script src = "../js/vue.js"></script>
<script>
  const app = new vue({
    el : "#app",
    data : {
      info : {
        name : "fdg",
        age : 22,
        height : 1.83,
      }
    },
  })
</script>

注：v-for的key属性

官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。

为什么需要这个kry属性呢？这和vue的虚拟DOM的Diff算法有关系。

当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点。

如：数组里有A、B、C、D、E五个元素，我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：把C更新成F，D更新成C，E更新成D，最后再插入E。

所以需要使用key来给每个节点做唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

所以一句话，key的作用主要是为了高效的更新虚拟DOM

3、数组的补充

哪些数组的方法是响应式的

（1）push()方法（可响应式）

该方法作用为往数组后面插入元素（letters为数组名）

this.letters.push('aaa')              //插入一个
this.letters.push('aaa','bbb','ccc')  //插入多个

（2）pop()方法（可响应式）

该方法作用为删除数组最后的一个元素。

this.letters.pop('aaa')

（3）shift()方法（可响应式）

该方法作用为删除数组中第一个元素

this.letters.shift('aaa')

（4）unshift()方法（可响应式）

该方法作用为在数组最前面添加元素

this.letters.unshift('aaa')               //添加一个
this.letters.unshift('aaa','bbb','ccc')   //添加多个

（5）splice()方法（可响应式）

该方法作用：删除元素、插入元素、替换元素

splice()的参数：

第一个参数：splice(start)：这个参数表明你要从哪个位置删除元素或者插入元素及替换元素。

第二个参数：如果是准备删除元素的话，传入要删除几个元素。如：splice(2,2) 就是从第二个开始，删除两个元素，如果不传第二个元素的话，会删除从第二个开始之后的所有元素。

this.letters.splice(2,2)   

如果是准备替换元素的话，后面要加上替换的元素。如：splice(2,2,‘a’,‘b’)。就是从第二个开始元素开始，替换两个，替换的结果为a,b。

this.letters.splice(2,2,'a','b')   

如果是插入元素的话，第二个元素写0，后面加上要添加的元素即可。如：splice(2,0,‘a’,‘b’,‘c’)。就是从第二个元素后面加入三个元素。

this.letters.splice(2,0,'a','b','c')   

（6）sort()方法（可响应式）

该方法作用：为数组中的所有元素排序

this.letters.sort()   

（6）reverse()方法（可响应式）

该方法作用：翻转数组中的所有元素

this.letters.reverse()   

==注：==通过索引值修改数组中的元素（不响应）

this.letters[0] = 'aaa'   

补充：vue中的set方法

set(要修改的对象，索引值，修改后的值)。如下：

Vue.set(this.letters,0,'aaaaa')

作用为修改letters中下标为0的元素为aaaaa。