用索引值判斷v-bind:class


雜:使用bootstrap框架等分div,默認12份,等分則

<div class="row"> 
          <div class="col-md-6">
          </div> 
          <div class="col-md-6">
           </div>    
</div>

"col-md-6"中還可分,類推

用索引值判斷v-bind:class

當值不固定時,則可以使用索引值進行:class判斷

<li class="list" v-for="item in arrlist">
<div class="Num " :class="
{pink:$index==0,ogreen:$index==1,blue:$index==2,yellowf:$index==3}">{{item.num}} </div>
<script type="text/javascript">
    export default{
    data(){
        return{
                arrlist:[{name:'設備',num:1,},{name:'未處理',num:2},{name:'企業',num:3},{name:'建築',num:4}]
        }
    }
}  
</script>
 

 

判斷顏色:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM