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">&nbsp; &nbsp; <li v-for="obj in list">&nbsp; &nbsp; &nbsp; &nbsp; <span v-for="num in obj.number.split(',')">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{num=='3'?'胜':'平'}}&nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; </li></ul><script>&nbsp; &nbsp; new Vue({&nbsp; &nbsp; &nbsp; &nbsp; el: '.warp',&nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list:[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {number:'3,1'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {number:'1'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {number:'3'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {number:'3,1'}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })</script>