vue一些逻辑问题

Question

//data数据如下 3代为胜 1代表平 每一个number长度可能是1也可能是2；list:[  {number:'3,1'},  {number:'1'},  {number:'3'},  {number:'3,1'}  ..............]  //dom渲染如下<ul class='warp'>    <li><span>胜<span><span>平</span><li>    <li><span>平</span><li>    <li><span>胜</span><li>    ....................</ul> 用vue如何不操作dom下实现这个需求，之前习惯用js操作dom实现，现在操作数据现实渲染就太会了；

Answer 1

<ul class="warp">

    <li v-for="obj in list">

        <span v-for="num in obj.number.split(',')">

            {{num=='3'?'胜':'平'}}

        </span>

    </li>

</ul>

<script>

    new Vue({

        el: '.warp',

        data: {

            list:[

                {number:'3,1'},

                {number:'1'},

                {number:'3'},

                {number:'3,1'}

            ]

        }

    })

</script>