Vue.js学习笔记——6.v-for指令的使用

最新推荐文章于 2025-01-03 09:48:42 发布

原创最新推荐文章于 2025-01-03 09:48:42 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue.js学习笔记专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了Vue.js中的v-for指令，包括基本使用方法，如何绑定key，以及数组响应式更新的注意事项。v-for可用于遍历数组和对象，提供了便利的数据渲染方式。同时，文章强调了在使用v-for时绑定key的重要性，以优化虚拟DOM的Diff算法，提高性能。此外，还探讨了Vue中数组响应式更新的正确操作，例如使用push、pop、shift、unshift、splice等方法来确保视图的正确更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、v-for的基本使用

当我们有一组数据需要进行渲染时，可以使用v-for循环遍历渲染，v-for能够遍历数组或对象。
作用：循环遍历
语法：

<element v-for="item in arr"></element>
<element v-for="(item,index) in arr"></element>
<element v-for="(value,key) in obj"></element>
<element v-for="(value,key,index) in obj"></element>

举例：遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <ul>
    <!--在遍历过程中没有使用下标值-->
    <li v-for="item in message">{{item}}</li>
    <br>
    <!--在遍历过程中使用了下标值-->
    <li v-for="(item,index) in message">{{index+1}}.{{item}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:["apple","banana","peach","melon"]
    }
  })
</script>
</body>
</html>

执行结果：
遍历数组
item in message表示不断从message里取出item，然后在mustache语法中使用item，如果需要同时取出数据和它的下标值，那就使用(item,index) in message

举例：遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <ul>
    <!--  直接获取对象，获取的是对象的value  -->
    <li v-for="item in message">{{item}}</li>
    <br>
    <!--  获取对象的value和key  -->
    <li v-for="(value,key) in message">{{key}}:{{value}}</li>
    <br>
    <!--  获取对象的value、key和下标值  -->
    <li v-for="(value,key,index) in message">{{index+1}}.{{key}}:{{value}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:{
        name:"qbj",
        age:18,
        height:185
      }
    }
  })
</script>
</body>
</html>

执行结果：
遍历对象
直接获取对象，获取的就只有对象的value，此外还可以通过元组的形式获取对象的key和index。在开发中对象的index使用的较少。

二、v-for绑定key

官方推荐我们在使用v-for时，给对应元素或组件添加上一个key属性，其原因与Vue的虚拟DOM的Diff算法有关。举个栗子：
当我们希望在节点[A,B,C,D,E,F]中的BC之间插入一个F

Diff默认执行流程是这样的：把C更新成F，D更新成C，E更新成D，最后再插入E，这样就极大降低了效率

所以我们要使用key来给每个节点做一个标识，Diff算法就可以正确识别此节点并找到正确位置插入节点，即key的作用是为了高效的更新虚拟DOM
绑定key后
语法：

<!--使用item即数组的内容作为key-->
<li v-for="item in message" :key="item">{{item}}</li>

注意在绑定key时要选择唯一的值，绑定相同的值就没有意义了

三、数组中是响应式的语法

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据发生变化，视图会发生对应更新，但在数组中，不是所有改变数组的方式都会使视图响应式更新。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(item,index) in arr">{{index+1}}.{{item}}</li>
  </ul>
  <button id="btn" @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      arr:["a","b","c","d","e"]
    },
    methods:{
      btnClick:function () {
      //  可以使数组响应式更新的方法：
      //  1.push()：在数组最后添加元素
      //   this.arr.push('f','g','h')

      //  2.pop():删除数组中最后一个元素
      //  this.arr.pop()

      //  3.shift():删除数组中第一个元素
      //  this.arr.shift()

      //  4.unshift():在数组最前面添加元素
      //  this.arr.unshift('f','g','h')

      //  5.splice():删除/插入/替换元素
      //  删除元素：第一个参数为从第几个元素开始，第二个参数为要删除的元素个数（如果没有传即删除后面所有元素）
      //  this.arr.splice(2,2)
      //  替换元素：第一个参数为从第几个元素开始，第二个参数为要替换的元素个数，后面是用于替换的元素
      //   this.arr.splice(2,2,'f','g')
      //  插入元素：第一个参数为从第几个元素开始，第二个参数为0，后面是要插入的元素
      //  this.arr.splice(2,0,'f','g')

      //  6.sort():数组排序

      //  7.reverse():数组倒置

      //  注意：通过索引值修改数组的元素不会引起响应式变化
        this.arr[0] = 'aaaaa'
      }
    }
  })
</script>
</body>
</html>