v-for循环数组和对象及对象数组的方法

最新推荐文章于 2025-07-06 22:51:21 发布

原创最新推荐文章于 2025-07-06 22:51:21 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

方法同时被 3 个专栏收录

73 篇文章

订阅专栏

67 篇文章

订阅专栏

v-for循环数组及对象

1 篇文章

订阅专栏

本文介绍了Vue.js中使用v-for指令遍历数组的基本语法，并探讨了如何结合索引index进行渲染。同时，讲解了在v-for循环中绑定key值以优化性能的重要性。文章还详细讨论了数组的修改方法，如push、pop、shift和unshift等，以及如何直接修改数组内容。最后，展示了如何在对象上使用v-for循环，并展示了向对象添加新属性的方法。

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

v-for循环数组的方法

<body>
    <div id="root">
        <div v-for="(item,index) in listArray">
            {{item}}
        </div>
    </div>
</body>

</html>
<script>
    const app = Vue.createApp({
        data() {
            return {
                listArray: ['dell', 'lee', 'teacher']
            }
        },

    });
    const vm = app.mount('#root')
</script>

上面代码写完后在浏览器中预览效果，可以看到，已经如我们所愿，在页面渲染出了列表。在这里插入图片描述

在v-for渲染数组时中还可以加入索引index，也就是数组的下标。

  <div id="root">
        <div v-for="(item,index) in listArray">
            {{item}}--{{index}}
        </div>
    </div>

在这里插入图片描述
这些就是最基本v-for循环数组的知识。

关于循环时的key值

为了提高循环时性能，在数组其中一项变化后，整个数组不进行全部重新渲染，Vue提供了绑定key值的使用方法，目的就是增加渲染性能，避免重复渲染。

为了理解这个概念，先编写出一个按钮，然后每次点击按钮后向数组中增加push一个新值。
写完后，你到页面中预览，当你点击按钮时，表面上你看到增加了一个新的内容，实际整个列表都被重新渲染了。

  <div id="root">
        <div v-for="(item,index) in listArray">
            {{item}}--{{index}}
        </div>
        <button @click="handleChangeBtnClick">点我改变</button>
    </div>

<script>
    const app = Vue.createApp({
        data() {
            return {
                listArray: ['dell', 'lee', 'teacher']
            }
        },
        methods: {
            handleChangeBtnClick() {
                this.listArray.push('willem')
            }
        },
    });
    const vm = app.mount('#root')
</script>

在实际工作中，这样的代码是不被允许的，它会降低页面的性能，在数据量变多的时候，用户用起来会变的卡顿。

这时，你可以加唯一性key值，增加后vue就会辨认出哪些内容被渲染后并没有变化，而只渲染新变化的内容

<div id="root">
        <div v-for="(item,index) in listArray" :key="index+item">
            {{item}}--{{index}}
        </div>
        <button @click="handleChangeBtnClick">点我改变</button>
    </div>

官方不建议使用索引index为key值，但此时又为了保持唯一性，所以这里使用了index+item进行绑定key值。

<body>
    <div id="root">
        <div v-for="(item,index) in listArray" :key="index+item">
            {{item}}--{{index}}
        </div>
        <button @click="handleChangeBtnClick">点我改变</button>
    </div>
</body>

</html>
<script>
    const app = Vue.createApp({
        data() {
            return {
                listArray: ['dell', 'lee', 'teacher']
            }
        },
        methods: {
            handleChangeBtnClick() {
                this.listArray.push('willem')
            }
        },
    });
    const vm = app.mount('#root')
</script>

v-for循环对象的方法

v-for不仅可以循环数组，还可以循环对象，使用方法基本和数组一样（但其中参数值是不一样的）。这里先在data中建立一个对象。

 data() {
            return {
                listObject: {
                    firstName: 'dell',
                    lastName: 'Lee',
                    job: 'teacher'
                }
            }
        },

在模板中进行循环的时候，为了更好的语义化，我们把参数改为了value、key和index，然后进行循环。

    <div id="root">
        <div v-for="(value,key,index) in listObject" :key="index">
            {{value}}--{{key}}----{{index}}
        </div>
    </div>

页面预览：一样的效果
在这里插入图片描述

修改数组的一些方法：

 handleChangeBtnClick() {
                //1. 使用数组的变更函数 push, pop, shift,unshift,splice,sort,
                //   push() 在数组末尾添加元素，接收一个或多个参数
                //   unshift() 在数组首位添加元素，接收一个或多个参数
                //   shift：删除数组第一个元素
                //   pop() 删除数组末尾元素
                //   shift() 删除数组第一个元素
                //   reverse:数组反转
                //   this.listArray.push('willem')
                //   this.listArray.pop('')
                //   this.listArray.shift('')
                //   this.listArray.unshift('willem')
                //   this.listArray.reverse()

                // 2.直接替换数组
                // this.listArray=['bye',world]
                // this.listArray = ['bye'].concat(['world'])
                // this.listArray = ['bye', 'world'].filter(item => item === 'bye')

                // 3.直接更新数组的内容
                this.listArray[1] = 'hello'
            }

总结：

//   push() 在数组末尾添加元素，接收一个或多个参数
  // unshift() 在数组首位添加元素，接收一个或多个参数
  // pop() 删除数组末尾元素
  // shift() 删除数组第一个元素
  const geyao = ['歌谣']
  geyao.push('优秀')
  geyao.push('强大')
  console.log(geyao, 'geyao')
  geyao.unshift('我是')
  console.log(geyao, 'geyao')
  geyao.pop()
  console.log(geyao, 'geyao')
  geyao.shift()

push() 在数组末尾添加元素，接收一个或多个参数

unshift() 在数组首位添加元素，接收一个或多个参数

pop() 删除数组末尾元素

shift() 删除数组第一个元素

reverse() 数组反转

往对象里添加元素

handleChangeBtnClick() {
                // 直接添加对象的内容，也可以自动的展示出来
                this.listObject.age = 100;
                this.listObject.sex = 'male'
            }