vue.js li根據獲取到不同的數據顯示不同的樣式

<li 
              v-for="site in goodsList" 
              :key="site.id"
              :class= "site.label2? 'list2' : 'list1'"
            >
 .list .list1{
       width: 856px;
      height: 111px;
      background: url('~@/assets/img/list2.png') left top no-repeat;
    }
    .list .list2{
       width: 856px;
      height: 178px;
      background: url('~@/assets/img/list.png') left top no-repeat;
    }

li在循環的時候判斷接口返回的某字段有無值顯示不同的大小以及背景圖片,剛開始想的是用v-if去判斷然後給不同的樣式,後面知道當 v-if 與 v-for 一起使用時,v-for 具有比 v-if 更高的優先級,這意味着 v-if 將分別重複運行於每個 v-for 循環中

所以,不推薦v-if和v-for同時使用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章