The for loop of vue renders different content under different conditions

< 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: "-sharpapp",
    data:{
      dataList:[{
        WLCC:1048571
      },{
        WLCC:10485762
      },{
        WLCC:12000000000000
      }],
    },
   methods:{

   }

});

KBMB
Mar.24,2021

are you sure you wrote it correctly?
'1024 < item.WLCC < 1024024'


dataListKB


{{ item.WLCC==null?0:item.WLCC }}

      <span  class="bdzdjj" v-else-if='1024*1024<item.WLCC && item.WLCC<1024*1024*1024'>MB</span>
      MBitem.WLCCitem.WLCCMB
Menu