vue之for循环不同条件下渲染不同内容

Question

<div id="app">
<div style="width: 100%;">

<div class="data-list" v-for="(item, index) in dataList">
  <el-col :span='24' class='bd-border'>
    <el-col :span='24' class='itemtop'>
      <span>{{ index+1 }}</span>
      <span  class="bdzdjj" v-if='1024<item.WLCC<1024*1024'>KB</span>
      <span  class="bdzdjj" v-else-if='1024*1024<item.WLCC<1024*1024*1024'>MB</span>
    </el-col>
  </el-col>
</div>

</div>
</div>

var app = new Vue({
    el: '#app',
    data:{
      dataList:[{
        WLCC:1048571
      },{
        WLCC:10485762
      },{
        WLCC:12000000000000
      }],
    },
   methods:{

   }

});
。。。。。。。。。。。。。。。。。。。。。。。。。。。
不同的数据情况下，渲染显示不同的单位，但是渲染结果却无效，只有一个单位KB，没有MB

Answer 1

你确定没有写错?
'1024<item.WLCC<1024*1024'

Answer 2

dataList里面的数据都能符合第一条判断，只显示KB没毛病

Answer 3

<span class="bdzdsl" v-else-if='10241024<item.WLCC && item.WLCC<10241024*1024'>{{ item.WLCC==null?0:item.WLCC }}</span>

      <span  class="bdzdjj" v-else-if='1024*1024<item.WLCC && item.WLCC<1024*1024*1024'>MB</span>
      判断写的不合适，但是这么写MB和item.WLCC只显示item.WLCC，而不显示MB