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