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

欲速则不达，稳中求胜。

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

v-for循环数组的方法

<!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{ 
            }
        },
        methods:{
        },
        template:``
    }) 
    const vm=app.mount("#app")
</script>
</html>

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

代码如下：

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

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

代码如下：

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

在这里插入图片描述

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

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

在这里插入图片描述
这些就是最基本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值。

<!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{
                listArray:['初级','中级','高级']
            }
        },
        methods:{
            handleChangeBtnClick(){
                this.listArray.push('willem');
            }
        },
        template:`
            <ul>
                <li v-for="(item,index)  in listArray" :key="index+item">
                    [{{index}}]{{item}}
                </li>
            </ul>
            <button @click="handleChangeBtnClick">点我改变</button>
        `
    }) 
    const vm=app.mount("#app")
</script>
</html>

在这里插入图片描述

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>

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

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

# linux # 运维 # 服务器
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

HAS2024：华为云以系统性创新加速千行万业智能化升级

avatar 华为云开发者联盟
cover

数仓的两种轻量级数据交换格式：json与jsonb

avatar 华为云开发者联盟
cover

如何使用云数据库GaussDB管理平台进行实例安装？

avatar 华为云开发者联盟