Vue学习笔记之07-v-for循环遍历

v-for循环遍历数组

• v-for循环遍历一个数组, 没有使用索引值(下标值) v-for=“item in arr”
• v-for循环遍历一个数组, 使用索引值(下标值) v-for="(item, index) in arr"

<div id="app">
    <!-- v-for循环遍历一个数组, 没有使用索引值(下标值) -->
    <ul>
      <li v-for="item in names">{{item}}</li>
    </ul>

    <!-- v-for循环遍历一个数组, 使用索引值(下标值) -->
    <ul>
      <li v-for="(item,index) in names">{{index}} {{item}}</li>
    </ul>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        names: ["xiaoLam", "kobe", "jams", "copo"]
      }
    })
  </script>

v-for循环遍历对象

• v-for=“value in obj” 遍历obj对象中的值value
• v-for="(value,key) in obj" 遍历obj对象中的值value和键key
• v-for="(value, key, index) in obj" 遍历obj对象中的值value和键key和下标index(很少用)

<div id="app">
    <!-- v-for="value in obj" 遍历obj对象中的值value -->
    <ul>
      <li v-for="value in obj">{{value}}</li>
    </ul>

    <!-- v-for="(value,key) in obj" 遍历obj对象中的值value和键key -->
    <ul>
      <li v-for="(value,key) in obj">{{value}},{{key}}</li>
    </ul>

    <!-- v-for="(value, key, index) in obj" 遍历obj对象中的值value和键key和下标index(很少用) -->
    <ul>
      <li v-for="(value, key, index) in obj">{{value}}, {{key}}, {{index}}</li>
    </ul>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        obj: {
          name: "xiaoLam",
          age: 18,
          tall: 1.70
        }
      }
    })
  </script>

组件的key属性

• 官方推荐在使用v-for的时候, 给对应的元素添加一个 :key 属性
• key属性是Vue的虚拟DOM的Diff算法中用来识别元素唯一性的属性
• 添加这个 :key属性的好处
  • 这个其实和Vue的虚拟DOM的Diff算法有关系
  • 当某一层有很多相同的节点时, 也就是列表节点时,当我们希望插入一个新的节点时, 比如希望在B和C之间插入一个F, Diff算法默认的做法时这样的: 把C更新为F, 把D更新为C, 把E更新为D, 最后再插入一个E, 这样的做法效率时很低的
• 所以我们需要使用key来给每个节点做一个唯一的标识
  • Diff算法就可以正确地识别这个节点
  • 然后找到正确地位置区插入新的节点
• 一句话, key地作用主要就是为了高效地更新虚拟DOM
• :key一定要写入唯一的, 能对应标签的值, 否则没有意义