1. v-for 遍历数组

  • 当我们有一组数据需要进行渲染时，我们就可以使用 v-for 来完成。

    • v-for 的缘分类似于 JavaScript 中的 for 循环。
    • 格式如下：v-for="item in items" 的形式
    • 依次从 items 中取出 item，并且在元素的内容中，我们可以使用 Mustache 语法，来使用 item

  • 如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？

    • 语法格式：v-for="(item, index) in items"
    • 其中的 index 就代表了取出的 item 在原数组的索引值

案例如下：
image.png

  1. <div id="app">
  2.   <!-- 1. 在遍历过程中，没有使用索引值（下标值） -->
  3.   <ul>
  4.     <li v-for="item in names">{{item}}</li>
  5.   </ul>
  7.   <!-- 2. 在遍历过程中，获取索引值 -->
  8.   <ul>
  9.     <li v-for="(item, index) in names">
  10.       {{index + 1}} - {{item}}
  11.     </li>
  12.   </ul>
  13. </div>
  15. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
  16. <script type="text/javascript">
  17.   const app = new Vue({
  18.     el: '#app',
  19.     data: {
  20.       names: ['jle', 'kobe', 'james', 'curry']
  21.     }
  22.   })
  23. </script>

2. v-for 遍历对象

代码示例：
image.png

  1. <div id="app">
  2.   <!-- 1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是 value -->
  3.   <ul>
  4.     <li v-for="item in info">{{item}}</li>
  5.   </ul>
  7.   <!-- 2.获取key和value  (value, key) -->
  8.   <ul>
  9.     <li v-for="(value, key) in info">{{value}} - {{key}}</li>
  10.   </ul>
  12.   <!-- 3.获取key和value和index 格式：(value, key, index)-->
  13.   <ul>
  14.     <li v-for="(value, key, index) in info">{{value}} - {{key}} - {{index}}</li>
  15.   </ul>
  17. </div>
  19. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
  20. <script type="text/javascript">
  21.   const app = new Vue({
  22.     el: '#app',
  23.     data: {
  24.       info: {
  25.         name: 'jle',
  26.         age: 18,
  27.         height: 1.8
  28.       }
  29.     }
  30.   })
  31. </script>

3. 组件的 key 属性

先说结论：key 的作用主要是为了高效的更新虚拟 DOM。

  • 预期：number | string | boolean (2.4.2 新增) | symbol (2.5.12 新增)

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

  • 官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。
  • 为什么需要这个key属性呢（了解）？
    • 这个其实和Vue的虚拟DOM的Diff算法有关系。
    • 这里我们借用React’sdiff algorithm中的一张图来简单说明一下：
  • 当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点
    • 我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。
    • 即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
  • 所以我们需要使用key来给每个节点做一个唯一标识
    • Diff算法就可以正确的识别此节点
    • 找到正确的位置区插入新的节点。

image.pngimage.png

  1. <!-- 在B之后插入F -->
  2. <!-- app.letters.splice(2, 0, 'F') -->
  4. <div id="app">
  5.   <ul>
  6.     <li v-for="item in letters" >{{item}}</li>
  7.   </ul>
  8. </div>
  10. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
  11. <script type="text/javascript">
  12.   const app = new Vue({
  13.     el: '#app',
  14.     data: {
  15.       letters: ['A', 'B', 'C', 'D', 'E']
  16.     }
  17.   })
  18. </script>

4. 检测数组的更新

  • 因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
  • Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

详细见下方代码：

  1. <div id="app">
  2.   <ul>
  3.     <li v-for="item in letters" :key="item">{{item}}</li>
  4.   </ul>
  5.   <button type="button" @click="btnClick">按钮</button>
  6. </div>
  8. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
  9. <script type="text/javascript">
  10.   const app = new Vue({
  11.     el: '#app',
  12.     data: {
  13.       letters: ['a', 'b', 'c', 'd']
  14.     },
  15.     methods: {
  16.       btnClick() {
  17.         //1.push方法 从数组尾部添加一个或多个元素，并返回新数组的长度
  18.         // console.log(this.letters.push('aaa', 'bbb'))
  20.         //2.通过索引值修改数组中的元素
  21.         //vue 没有响应式
  22.         // this.letters[0] = 'abc'
  23.         // this.letters.splice(0, 1, 'abc')
  26.         //3.pop() 删除数组中最后一个元素
  27.         // this.letters.pop();
  29.         //4.shift() 删除数组中的第一个元素
  30.         // this.letters.shift()
  32.         //5.unshift() 向数组开头添加一个或多个元素，并返回新数组的长度
  33.         // console.log(this.letters.unshift('AAA', 'BBB'))
  35.         //6.splice() 删除元素、插入元素、替换元素
  36.         //splice(start)   [start ,从start到最后一个元素都删除
  37.         //删除元素：第二个参数传入要删除元素的个数
  39.         //替换元素：第二个参数，代表我们要替换几个元素，后面是用于替换的元素
  40.         // this.letters.splice(1, 3, 'o', 'p', 'q')
  42.         //插入元素：第二个参数，传入0，并且后面跟上要插入的元素
  43.         // this.letters.splice(1, 0, 'x', 'y', 'z')
  45.         //7.sort()
  46.         // this.letters.sort()
  48.         //8.reverse()
  49.         // this.letters.reverse()
  51.         //set(要修改的对象, 索引值, 修改后的值)
  52.         Vue.set(this.letters, 0, 'ABC')
  53.       }
  54.     }
  55.   })
  56. </script>


5. v-for 案例

  • 需求：点击列表内容，将字体修改为 红色，其余的默认为黑色

image.png

  1. <div id="app">
  2.   <ul>
  3.     <li v-for="(item, index) in movies" :class="{active: currentIndex === index}" @click="currentIndex = index">{{item}}</li>
  4.   </ul>
  5. </div>
  7. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
  8. <script type="text/javascript">
  9.   const app = new Vue({
  10.     el: '#app',
  11.     data: {
  12.       movies: ['海王', '海贼王', '海尔兄弟'],
  13.       currentIndex: 0,
  14.     }
  15.   })
  16. </script>