vue一些逻辑问题-PHP中文网问答

vue一些逻辑问题

高洛峰 2016-11-03 10:14:33

[HTML讨论组]

858

//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实现，现在操作数据现实渲染就太会了；

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(1)

三叔2016-11-03 10:15:40 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;
  }
}

赞 +0

添加回复