Vue中的条件渲染和循列表渲染

时间:2021-10-11
本文章向大家介绍Vue中的条件渲染和循列表渲染,主要包括Vue中的条件渲染和循列表渲染使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

小编之前更新过相关的内容,之前对Vue3没有了解那么深入,今天小编系统的将这两个常用的渲染方式统一整理到这篇文章中。
一、条件渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    show: true,
                    conditionOne:true,
                    conditionTwo:false
                }
            },
            // 只有show为true的时候,展示该div
            // v-if为false的时候,直接移除DOM
            // v-show通过对DOM元素通过样式display来控制是否显示DOM
            // 频繁控制DOM使用v-show性能更高,不涉及DOM操作
            // 与v-if对应的还有一个v-else 上下两行要挨在一起
            // v-else-if
            template:`<div v-if="show">Hello World</div>

                    <div v-if="conditionOne">Hello World</div>
                    <div v-else>Hello World</div>

                    <div v-if="conditionOne">ifOne</div>
                    <div v-else-if="conditionTwo">elseTwo</div>
                    <div v-else>else</div>

                    <div v-show="show">Hello World</div>`
        })
        const vm = app.mount("#root")
</script>
</body>
</html>

二、列表渲染
1、数组列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    listArray: ['item1','item2','item3'],
                }
            },
            methods:{
                handleBtnClick(){
                    // 方法一、数组的变更函数 
                    // pop删除数组内最后一个元素
                    // shift删除数组内第一个元素
                    // unshift在数组第一项增加
                    // splice变更数组内容
                    // sort排序
                    // reverse将数组掉个
                    this.listArray.push('Hello Vue3')

                    // 方法二、直接改变数组
                    this.listArray = ['1','2','3']
                    this.listArray = ['1','2','3'].concat('4')
                    this.listArray.filter((v) => {
                        return v === '3'
                    })

                    // 方法三、更新数组内指定元素
                    this.listArray[2] = 'hanmeimei'
                }
            },
            // 对于数组,第一个参数item代表的是内容本身,第二个参数index是数组的下标
            // 对于数组的渲染,在像数组内push元素的时候,尽可能展示新增的元素,原来存在的数据可以不再次渲染,这个时候产生了循环时候的key,建议使用v-for的时候,增加元素的key            
            template:`<div v-for="(item,index) in listArray" :key="index">{{ item }}--{{ index }}</div>
                    <button @click="handleBtnClick"></button>`
        })
        const vm = app.mount("#root")
</script>
</body>
</html>

2、对象列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return {

                    listObj: {
                        firstName: 'li',
                        lastName: 'lei',
                        job: 'teacher'
                    }
                }
            },
            methods:{
                handleBtnClick(){
                    // 直接像对象添加属性。在之前版本会出现问题,需要调用this.$nextClick或者this.$set进行更新,新版本才不会出现问题
                    this.listObj.age = 100
                }
            },
            // 对于对象,第一个参数value代表的是value,第二个参数表示key,第三个参数表示的下标
            template:`<div v-for="(value,key,index) in listObj" v-if="key !== 'lastName'">{{ value }}--{{ item }}--{{ index }}</div>
                    <button @click="handleBtnClick"></button>`
        })
        const vm = app.mount("#root")
</script>
</body>
</html>

3、综合实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    listArray: ['item1','item2','item3'],
                    listObj: {
                        firstName: 'li',
                        lastName: 'lei',
                        job: 'teacher'
                    }
                }
            },
            methods:{
                handleBtnClick(){
                    // 方法一、数组的变更函数 
                    // pop删除数组内最后一个元素
                    // shift删除数组内第一个元素
                    // unshift在数组第一项增加
                    // splice变更数组内容
                    // sort排序
                    // reverse将数组掉个
                    this.listArray.push('Hello Vue3')

                    // 方法二、直接改变数组
                    this.listArray = ['1','2','3']
                    this.listArray = ['1','2','3'].concat('4')
                    this.listArray.filter((v) => {
                        return v === '3'
                    })

                    // 方法三、更新数组内指定元素
                    this.listArray[2] = 'hanmeimei'


                    // 直接像对象添加属性。在之前版本会出现问题,因为数组和对象都是引用数据类型。需要调用this.$nextClick或者this.$set进行更新,新版本才不会出现问题
                    this.listObj.age = 100
                }
            },
            // 对于数组,第一个参数item代表的是内容本身,第二个参数index是数组的下标
            // 对于对象,第一个参数value代表的是value,第二个参数表示key,第三个参数表示的下标
            // 对于数组的渲染,在像数组内push元素的时候,尽可能展示新增的元素,原来存在的数据可以不再次渲染,这个时候产生了循环时候的key,建议使用v-for的时候,增加元素的key
            // v-for和v-if同时作用在一个标签的时候,v-for的优先级高于v-if。解决方案可以在DOM内部添加DOM元素。为了DOM保持一直的话,可以使用<template>占位符,类似React中的<Fragement>
            template:`<div v-for="(item,index) in listArray" :key="index">{{ item }}--{{ index }}</div>
                    <div v-for="(value,key,index) in listObj" v-if="key !== 'lastName'">{{ value }}--{{ item }}--{{ index }}</div>
                    <button @click="handleBtnClick"></button>`
        })
        const vm = app.mount("#root")
</script>
</body>
</html>

大家还可以扫描二维码,关注我的微信公众号,蜗牛全栈

原文地址:https://www.cnblogs.com/feiying3995/p/15394879.html