今天就跟大家聊聊有關(guān)怎么在Vue.js中動態(tài)綁定樣式，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)2013年至今，先為振安等服務(wù)建站，振安等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為振安企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

class屬性綁定

1. 三目元算符方式：

<!--vue代碼-->
    <ul>
      <li v-for="item in itemData" :key="item">
        <i :class="item.isA ? 'class_a' : 'class_b'"></i> 
      </li>
    </ul>

 <!-- CSS代碼 -->
  .class_a,.class_b{
    /*這里可以寫一些公共樣式*/
  }

  .class_a{
    /*這里寫需要設(shè)置的第一種樣式*/
  }

  .class_b{
    /*這里寫需要設(shè)置的第二種樣式*/
  }

2. 基本綁定：

<!--vue代碼-->
  <div :class="{class_a:isActive}"></div>

<!-- 博主在這里用vue-cli做例子，小伙伴們注意與vue的區(qū)別 -->
  export default {
    name: "test1",
    data(){
      return{
        isActive:true
      }
    }
  }

<!-- CSS代碼 -->
  .class_a{
    /*這里寫需要設(shè)置的樣式*/
  }

以上可以根據(jù)isACtive的值，動態(tài)判斷來進行class樣式的綁定。

特別說明：

1. vue 的分隔符默認是 {{ }}, 在分隔符里面的字符串會被認為是數(shù)據(jù)變量，可以通過 class="{{ className }}" 方式設(shè)置class，但是vue不推薦這種方式與 v-bind:class 的方式混用，二者只能選其一。

2. v-bind:class 雖然與class屬性里綁定變量的方式不能共存，卻可以與原生的class特性共存，即 一個DOM標(biāo)簽中允許同時出現(xiàn)原生class和v-bind:class。

3. 為了避免不必要的問題，要寫在data中的值盡量不要用中劃線，可以采用下劃線～如果data中用中劃線的話，需要加單引號，否則出錯，而且，在v-bind中使用時，也需要加單引號。加上單引號又無法識別數(shù)據(jù)，默認為true。
3. 可以傳入多個屬性動態(tài)切換多個class

<!--vue代碼-->    <div :class="{class_a:isActive,class_b:isActive_b}"></div>

4. 對象綁定

<!--vue代碼-->
    <div ：class="classObject"></div>

<!-- 博主在這里用vue-cli做例子，小伙伴們注意與vue的區(qū)別 -->
  export default {
    name: "test1",
    data(){
      return{
        classObject:{
          class_a:true,
          class_b:true
        }
      }
    }
  }

<!-- CSS代碼 -->
  .class_a{
    /*這里寫需要設(shè)置的第一種樣式*/
  }

  .class_b{
    /*這里寫需要設(shè)置的第二種樣式*/
  }

特別說明：

這里v-bind直接利用對象進行綁定，需注意對象中的鍵名應(yīng)與class樣式名保持一致。

5. 數(shù)組綁定

數(shù)組里的變量改變時，動態(tài)更新class列表

<!--vue代碼-->
    <div ：class="[classA,classB]"></div>

<!-- 博主在這里用vue-cli做例子，小伙伴們注意與vue的區(qū)別 -->
  export default {
    name: "test1",
    data(){
      return{
        classA:'class_a',
        classB:'class_b'
      }
    }
  }

<!-- CSS代碼 -->
  .class_a{
    /*這里寫需要設(shè)置的第一種樣式*/
  }

  .class_b{
    /*這里寫需要設(shè)置的第二種樣式*/
  }

6. 綁定返回對象的計算屬性

強大且常用的模式～

<!--vue代碼-->
    <div v-bind="classObject"></div>

<!-- 博主在這里用vue-cli做例子，小伙伴們注意與vue的區(qū)別 -->
  export default {
    name: "test1",
    data(){
      return{
        isActive:true
      }
    },
    computed:{
      classObject:function () {
        return{
          class_a:this.isActive,
          class_b:!this.isActive
        //  這里要結(jié)合自身項目情況修改填寫
        }
      }
    }
  }

<!-- CSS代碼 -->
  .class_a{
    /*這里寫需要設(shè)置的第一種樣式*/
  }

  .class_b{
    /*這里寫需要設(shè)置的第二種樣式*/
  }

style屬性綁定（內(nèi)聯(lián)）

1. 直接設(shè)置樣式

<!--vue代碼-->
    <div ：></div>

<!-- 博主在這里用vue-cli做例子，小伙伴們注意與vue的區(qū)別 -->
    export default {
      name: "test1",
      data(){
        return{
          selectedColor:pink,
          fontSize:20
        //  注意前后名稱的一致性
        }
      }
    }

2. 也可以使用對象

（可以參照上述class）

<!--vue代碼-->
    <div ：></div>

<!-- 博主在這里用vue-cli做例子，小伙伴們注意與vue的區(qū)別 -->
    export default {
      name: "test1",
      data(){
        return{
          styleObject{
            selectedColor:pink,
            fontSize:20
          }
        }
      }
    }

3. 使用數(shù)組

<!--vue代碼-->
    <div :></div>

<!-- 博主在這里用vue-cli做例子，小伙伴們注意與vue的區(qū)別 -->
  export default {
    name: "test1",
    data(){
      return{
        styleA:{
          color:'red',
          fontSize: '30px'
        },
        styleB:{
          color:'green',
          fontSize: '15px'
        },
      }
    }
  }

看完上述內(nèi)容，你們對怎么在Vue.js中動態(tài)綁定樣式有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)站名稱：怎么在Vue.js中動態(tài)綁定樣式
瀏覽地址：http://www.rwnh.cn/article18/jihddp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、網(wǎng)站導(dǎo)航、企業(yè)網(wǎng)站制作、App設(shè)計、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)