javascript - Vue中的条件渲染和列表渲染

问题描述

问 题

<div id="test">
    <ul v-for="item in ui">
        <li>{{item.n}}</li>
    </ul>
</div>

<div>
    <ul>
        <li>第一项</li>
        <li>第二项</li>
    </ul>
    <ul>
        <li>第三项</li>
    </ul>
</div>

<script>
let ui = [{
    "n": "第一项",
},{
    "n": "第二项",
},
{
    "n": "第三项",
}];
let vm = new Vue({
    el: "#test",
    data:{
        ui: ui
    }
})

</script>

怎么才能用条件渲染和列表渲染，达到每个ul里面有两个li才新加一个ul，而不是像第一个div里面的ul里面都只有一个li，就是第二个div实现的内容

解决方案

可以把数据改成对应的结构再渲染：

<div id="test">
    <ul v-for="ui in list">
        <li v-for="item in ui">
            {{item.n}}
        </li>
    </ul>
</div>
<script>
    let ui = [{
        "n": "第一项",
    },{
        "n": "第二项",
    },
    {
        "n": "第三项",
    }];
    var list=[],i=0;
    list[i]=[];
    ui.forEach(function(v,k){
        list[i].push(v);
        if(k%2 !==0){
            list[++i]=[];
        }
    });
    let vm = new Vue({
        el: "#test",
        data:{
            list:list 
        }
    })

这篇关于javascript - Vue中的条件渲染和列表渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！