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

v-for 渲染数据，过滤器改变数据值对应的中文意思

  
•     {{item2 | result}}   

data(){  return {
    list:[
      {number:[3,1]},
      {number:[1]},
      {number:[3]},
      {number:[3,1]}
    ]
  }
},
filters:{
  result(value){    var text;    switch(value){      case 1:text='平';break;      case 3:text='胜';break;
    }    return text;
  }
}