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

Question

<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实现的内容

Answer 1

可以把数据改成对应的结构再渲染：<div id="test">&nbsp; &nbsp; <ul v-for="ui in list">&nbsp; &nbsp; &nbsp; &nbsp; <li v-for="item in ui">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{item.n}}&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul></div><script>&nbsp; &nbsp; let ui = [{&nbsp; &nbsp; &nbsp; &nbsp; "n": "第一项",&nbsp; &nbsp; },{&nbsp; &nbsp; &nbsp; &nbsp; "n": "第二项",&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "n": "第三项",&nbsp; &nbsp; }];&nbsp; &nbsp; var list=[],i=0;&nbsp; &nbsp; list[i]=[];&nbsp; &nbsp; ui.forEach(function(v,k){&nbsp; &nbsp; &nbsp; &nbsp; list[i].push(v);&nbsp; &nbsp; &nbsp; &nbsp; if(k%2 !==0){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list[++i]=[];&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; let vm = new Vue({&nbsp; &nbsp; &nbsp; &nbsp; el: "#test",&nbsp; &nbsp; &nbsp; &nbsp; data:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list:list&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })