javascript - vue一些逻辑问题

问题描述

问 题

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

解决方案

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

这篇关于javascript - vue一些逻辑问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！