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

ゝ一纸荒年。 2023-10-06 20:29 20阅读 0赞

#### \[基础\]v-for列表循环详细讲解-1 ####

*  v-for循环数组的方法
 *  关于循环时的key值
 *  v-for循环对象的方法

欲速则不达，稳中求胜。

使用Vue的时候循环是最常用的一种操作，虽然我们在教程\[初识\]阶段已经简单讲解过了v-for的使用方法，但并不全面。下面，我们将使用两篇文章详细讲解v-for的具体使用方法。

## v-for循环数组的方法 ##

最基本的一个Vue文件结构，然后在`data`中声明一个数组，数组叫做`listArray`。

代码如下：

data(){
        return{  
            listArray:['初级','中级','高级']
        }
    },

`data`中数组写完后，现在要作的是在`template`中循环出这些数组，这里当然使用`v-for`。

代码如下：

template:`
        <ul>
            <li v-for="item in listArray">{
       {item}}</li>
        </ul>
    `

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

上面代码写完后在浏览器中预览效果，可以看到，已经如我们所愿，在页面渲染出了列表。在`v-for`渲染数组时中还可以加入索引`index`，也就是 数组的下标。

template:`
        <ul>
            <li v-for="(item,index)  in listArray">[{
       {index}}]{
       {item}}</li>
        </ul>
    `

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

## 关于循环时的key值 ##

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

为了理解这个概念，先编写出一个按钮，然后每次点击按钮后向数组中增加`push`一个新值。

methods:{
        handleChangeBtnClick(){
            this.listArray.push('willem')
        },
    },
    template:`
        //......
        <button @click="handleChangeBtnClick">点我改变</button>
    `

写完后，你到页面中预览，当你点击按钮时，表面上你看到增加了一个新的内容，实际整个列表都被重新渲染了。

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

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

<ul>
        <li v-for="(item,index)  in listArray" :key="index+item">
            [{
       {index}}]{
       {item}}
        </li>
    </ul>

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

![在这里插入图片描述][810ff9051e4f4ea8b7f91b2736d4bcdd.gif_pic_center]

## v-for循环对象的方法 ##

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

代码如下：

data(){
        return{  
            //......
            listObject:{
                DogOne:'黑背',
                DogTwo:'泰迪',
                DogThree:'金毛'
            }
        }
    },

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

<ul>
        <li v-for="(value,key,index) in listObject" :key="key">
            [{
       {index}}]{
       {value}}-{
       {key}}
        </li>
    </ul>

写完后可以到浏览器中预览，也是可以得到你想要的结果的。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://unpkg.com/vue@next" ></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app=Vue.createApp({
           
            data(){
          
                return{
          
                    newTodoText: 'willem',
                    todos: [
                      {
          
                        id: 1,
                        title: 'Do the dishes',
                      },
                      {
          
                        id: 2,
                        title: 'Take out the trash',
                      },
                      {
          
                        id: 3,
                        title: 'Mow the lawn'
                      }
                    ],
                    nextTodoId: 4
                }
            },
            methods:{
          
                handleChangeBtnClick(){
          
                    var num = this.nextTodoId++;
                    this.todos.push({
          
                        id: num,
                        title: this.newTodoText+num
                    })
                }
            },
            template:`
                <button @click="handleChangeBtnClick">点我改变</button>
                 
                 <div v-for="(value, key, index) in todos">
                     ID：{
           {value.id}}
                     title:{
           {value.title}}
                 </div>
            `
        })
        const vm=app.mount("#app")
    </script>
    </html>

![在这里插入图片描述][e12109e8935e46269d30e478365d0bc4.gif_pic_center]  
好了，这就是这篇文章的全部内容了。希望你能动手练习一下这些内容，因为他们在工作后基本每天都在使用。

下篇文章继续讲解如何`v-for`循环列表时的一些注意事项。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ba205a8b0c6145739947a36dbca580cd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b5480b90ee824c9f9456b51adfef1126.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_19,color_FFFFFF,t_70,g_se,x_16
[810ff9051e4f4ea8b7f91b2736d4bcdd.gif_pic_center]: https://img-blog.csdnimg.cn/810ff9051e4f4ea8b7f91b2736d4bcdd.gif#pic_center
[e12109e8935e46269d30e478365d0bc4.gif_pic_center]: https://img-blog.csdnimg.cn/e12109e8935e46269d30e478365d0bc4.gif#pic_center