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

Answer 2

// 修改楼上代码 v-for 渲染数据，过滤器改变数据值对应的中文意思
<ul class="wrap">
  <li v-for="item1 in list" v-html = "item1.number || result">
  </li>
</ul>

data(){
  return {
    list:[
      {number:'3,1'},
      {number:'1'},
      {number:'3'},
      {number:'3,1'}
    ]
  }
},
filters:{
  result(value){
    var text;
    var listForSplit = value.split(',');
    for (var i = 0; i < listForSplit.length; i++) {
        switch(listForSplit[i]){
          case 1:text += '<span>平</span>';break;
          case 3:text += '<span>胜</span>';break;
        }
    }
    return text;
  }
}

Answer 3

这问题都问，vue2.0有中文版翻译，自己看去，差评

Answer 4

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

<ul class="wrap">
  <li v-for="item1 in list">
    <span v-for="item2 in item1.number">{{item2 | result}}</span>
  </li>
</ul>

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;
  }
}