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

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
分析接口返回数据结构

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">
    <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>
    <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官方文档–列表渲染