Vue循环遍历

1.v-for介绍

作用	循环遍历
预期	Array | Object | number | string | Iterable (2.6 新增)
用法	alias in expression

2. v-for 遍历数组

<div id="app">
  <ul>
    <li v-for="name in names">{{name}}</li>
  </ul>
</div>
<script>
  const vue = new Vue({
      el: '#app',
      data: {
        names: ['张三', '李四']
      },
  });
</script>

使用过程中使用index

<div id="app">
  <ul>
    <li v-for="(name, index) in names">{{index + 1}} {{name}}</li>
  </ul>
</div>
<script>
  const vue = new Vue({
      el: '#app',
      data: {
        names: ['张三', '李四']
      },
  });
</script>

3.v-for遍历对象

<div id="app">
  <ul>
<!--    这样只能拿到属性的value,不能拿到key-->
    <li v-for="attribute in person">{{attribute}}</li>
  </ul>
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            person: {
                name: '张三',
                age: '12',
                height: '160'
            },
        },
    });
</script>

value 、 key 都获取

<div id="app">
  <ul>
    <li v-for="(value, key) in person">{{key}}: {{value}}</li>
  </ul>
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            person: {
                name: '张三',
                age: '12',
                height: '160'
            },
        },
    });
</script>

value 、 key 和 index 都获取

<div id="app">
  <ul>
    <li v-for="(value, key, index) in person">{{index + 1}}{{key}}: {{value}}</li>
  </ul>
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            person: {
                name: '张三',
                age: '12',
                height: '160'
            },
        },
    });
</script>

4.v-for是使用key和不使用key的区别

官方推荐在使用v-for的时候，给对应的元素或组件添加上一个key属性
1.遍历时不使用key

1.遍历时使用key

注意：
1.所谓的位移其实是元素重新创建初始化，不用位移就是复用以前的元素。
2.如果要使用key的话，不要用index，要保证key与内容的唯一标识性，因为index是会更新的，如果新增或者修改，那么用key就没什么意思了。

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。
如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。
而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

5.可以响应式的方法

<div id="app">
  <ul>
<!--    这样只能拿到属性的value,不能拿到key-->
    <li v-for="(name, index) in names" :key="name">{{name}}</li>
  </ul>
  <button @click="pushArray">push</button>

</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            names: ['张三', '李四'],
        },
        methods: {
            pushArray() {
                this.names.push("aaa");
            }
        }
    });
</script>

5.1 注意直接修改数组元素时是不会响应式的

<div id="app">
  <ul>
<!--    这样只能拿到属性的value,不能拿到key-->
    <li v-for="(name, index) in names" :key="name">{{name}}</li>
  </ul>
  <button @click="changed">changed</button>

</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            names: ['张三', '李四'],
        },
        methods: {
            changed() {
                this.names[0] = 111;
            }
        }
    });
</script>

点击changed之后页面没有变化，可以数组元素已经变化了

5.2 以上问题的解决方案:

<div id="app">
  <ul>
<!--    这样只能拿到属性的value,不能拿到key-->
    <li v-for="(name, index) in names" :key="name">{{name}}</li>
  </ul>
  <button @click="changed">changed</button>

</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            names: ['张三', '李四'],
        },
        methods: {
            changed() {
              this.names.splice(0, 1, '111');
              // Vue 内部实现的方法
              Vue.set(this.names, 1, '222');
            }
        }
    });

</script>

点击changed后：

5.3 以下方法都是响应式的：

push()	向数组末尾添加一个元素
pop()	删除数组中最后一个元素
shift()	删除数组中第一个元素
unshift()	向数组最前面添加一个或者多个个元素(参数是可变长度)
splice()	删除元素:第二个参数传入你要删除几个元素（如果没穿，就删除后面所有元素） 替换元素:第二参数，表示我们要替换几个元素，后面是用于替换前面的元素 插入元素:第二个参数穿0，后面是插入的元素
sort()	排序
reverse()	内容反转