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

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

v-for循环数组的方法

v-for最常用的功能就是循环数组,先来看一个数组循环的例子,我们新建一个Demo17.html的页面。

<!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:[email protected]" ></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('mybj123.com')
    },
},
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值

v-for循环对象的方法

v-for不仅可以循环数组,还可以循环对象,使用方法基本和数组一样(但其中参数值是不一样的)。这里先在data中建立一个对象。代码如下:

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

在模板中进行循环的时候,为了更好的语义化,我们把参数改为了valuekeyindex,然后进行循环。

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

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

v-for列表循环对象

好了,这就是这篇文章的全部内容了。希望你能动手练习一下这些内容,因为他们在工作后基本每天都在使用。下篇文章继续讲解如何v-for循环列表时的一些注意事项。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 17. [基础]v-for列表循环详细讲解-1

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们