//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实现，现在操作数据现实渲染就太会了；
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
v-for 渲染数据，过滤器改变数据值对应的中文意思
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; } }