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">

    <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 

        }

    })