Vue嵌套循环渲染与条件渲染--v-for|v-if

分析接口返回数据结构data对象下有9个键值对值分别有数组类型,Object类,和null数组类型Array下,存有若干个对象,每个对象有若干个值现遍历所有键值 , 并将null替换为"暂无"大致效果实例代码<div id="app"><div v-for="(item,key) in data_" :key="key"><!-- <div class="k

梦中千秋

3837人浏览 · 2021-12-16 17:28:57

梦中千秋 · 2021-12-16 17:28:57 发布

分析接口返回数据结构

data对象下有9个键值对值
分别有数组类型,Object类,和null
数组类型Array下,存有若干个对象,每个对象有若干个值
现遍历所有键值 , 并将null替换为"暂无"

大致效果

在这里插入图片描述

实例代码

<div id="app">
        <div v-for="(item,key) in data_" :key="key">
            <!-- <div class="key">第一层:{{key}}===={{item|demoFn}}</div> -->
            <div class="item"  v-if="item!=null"  v-for="(data_2,key,index) in item" :key="index">
                <!-- <div>第二层,我是data_2: 键:{{key}}----值:{{data_2|demoFn}}</div> -->
                <div v-if="!(item instanceof Array)">第二层,我是data_2: 键:{{key}}----值:{{data_2|demoFn}}</div>
                <div v-else class="vfor3" v-for="(data_3,key_3) in data_2">
                    第三层=>键:{{key_3}}---值:{{data_3|demoFn}}
                </div> 
                <hr class="hr2">
            </div>
            <hr class="hr1">
        </div>
    </div>

 new Vue({
            el: "#app",
            data: {
                data_: {},
            },
            created() {
                this.getSongInfo();
            },
            filters: {
                demoFn(data) {
                    if (data == null) {
                        return "暂无";
                    }
                    return data;
                }
            },
            methods: {
                getSongInfo() {
                    let url = "http://xxxxxxxxxxxxxxxxxxxxxxxx";
                    let that = this;
                    axios.get(url).then(function (res) {
                        console.log(res.data);
                        that.data_ = res.data.data;
                    })
                }
            }
        })

遍历对象与遍历数组的区别
遍历对象

我们既需要对象的键,也需要值与之对应
遍历数组
只需要值,键就是索引(0,1,2,3,4…),不显示无作用

判断数据类型

item instanceof Array 判断item是否为Array类,是返回true , v-if,渲染此项.反之亦然
!(item instanceof Array) 判断item是否不是Array类 ,不是返回true,是返回false

使用{{data_3|demoFn}}数据过滤, 替换值为null的值 .

v-for

第一层v-for,遍历的data,
第二层v-for 选择性遍历,判断v-if="item!=null",遍历的data对象下的每个值 ,
第三层v-for 选择性遍历 ,判断 v-if="!(item instanceof Array)"

思考

						<div v-if="!(item instanceof Array)">第二层,我是data_2: 键:{{key}}----值:{{data_2|demoFn}}</div>
                <div v-else class="vfor3" v-for="(data_3,key_3) in data_2">
                    第三层=>键:{{key_3}}---值:{{data_3|demoFn}}
                </div>

以上可否替换为以下


                <div v-if="item instanceof Array" class="vfor3" v-for="(data_3,key_3) in data_2">
                    第三层=>键:{{key_3}}---值:{{data_3|demoFn}}
                </div> 
                <div v-else>第二层,我是data_2: 键:{{key}}----值:{{data_2|demoFn}}</div>

注意

不能以带有v-for的标签写在前面,否则将会导致v-else标签会重复显示,跟着v-for执行了N次 .

css只是为了方便区分观察.

完整实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.24.0/dist/axios.js"></script>
    <style>
        .key{
            color: rgb(15, 15, 15);
        }
        .item{
            color: blueviolet;
        }
        .vfor3{
            color: tomato;
        }
        .hr1{
            height: 5px;
            background-color:  rgb(30, 146, 1);
        }
        .hr2{
            height: 3px;
            background-color:  rgb(76, 159, 192);
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-for="(item,key) in data_" :key="key">
            <!-- <div class="key">第一层:{{key}}===={{item|demoFn}}</div> -->
            <div class="item" v-if="item!=null"  v-for="(data_2,key,index) in item" :key="index">
                
                <!-- <div>第二层,我是data_2: 键:{{key}}----值:{{data_2|demoFn}}</div> -->
                <div v-if="!(item instanceof Array)">第二层,我是data_2: 键:{{key}}----值:{{data_2|demoFn}}</div>
                <div v-else class="vfor3" v-for="(data_3,key_3) in data_2">
                    第三层=>键:{{key_3}}---值:{{data_3|demoFn}}
                </div> 
                
                <hr class="hr2">
            </div>
            <hr class="hr1">
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                data_: {},

            },
            created() {
                this.getSongInfo();
            },
            filters: {
                demoFn(data) {
                    if (data == null) {
                        return "暂无";
                    }
                    return data;
                }
            },
            methods: {
                getSongInfo() {
                    let url = "http://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
                    let that = this;
                    axios.get(url).then(function (res) {
                        console.log(res.data);
                        that.data_ = res.data.data;
                    })
                }
            }
        })
    </script>
</body>
</html>

参考

Vue官网–条件渲染
 Vue官方文档–列表渲染

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^