快捷導(dǎo)航

Vue.js樣式動(dòng)態(tài)綁定實(shí)現(xiàn)小結(jié)

更新時(shí)間：2019年01月24日 14:51:44 作者：koreyoshia

這篇文章主要介紹了Vue.js樣式動(dòng)態(tài)綁定實(shí)現(xiàn)小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在項(xiàng)目中，我們時(shí)常會(huì)遇到動(dòng)態(tài)的去綁定操作切換不同的CSS樣式，結(jié)合自身項(xiàng)目中遇到的一些情況，也參考了一些文檔，針對vue.js樣式的動(dòng)態(tài)綁定切換做出如下小結(jié)：

動(dòng)態(tài)切換的核心思想：

利用vue指令v-bind來實(shí)現(xiàn)動(dòng)態(tài)綁定，從而設(shè)置切換不同的樣式～

vue的最大特點(diǎn)是數(shù)據(jù)驅(qū)動(dòng)，利用特殊的語法將DOM“綁定”到底層數(shù)據(jù)，DOM與數(shù)據(jù)保持同步，每當(dāng)數(shù)據(jù)發(fā)生變化，DOM視圖就會(huì)做出相應(yīng)的更新和響應(yīng)，正是基于這種特性，我們得以實(shí)現(xiàn)class和style的動(dòng)態(tài)綁定～

（一定要充分理解數(shù)據(jù)驅(qū)動(dòng)的含義，共勉～）

特別說明：

1. v-bind在處理class和style時(shí)，專門增強(qiáng)了它。表達(dá)式的結(jié)果類型不僅可以是字符串，還可以是對象和數(shù)組。

v-bind用于綁定屬性和數(shù)據(jù) ，其縮寫為“ : ” 也就是v-bind:id === :id 。

根據(jù)不同的項(xiàng)目需求和不同的實(shí)現(xiàn)思路，現(xiàn)初步總結(jié)了如下方法：

（歡迎小伙伴們補(bǔ)充添加，一起進(jìn)步～～）

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的值，動(dòng)態(tài)判斷來進(jìn)行class樣式的綁定。

特別說明：

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

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

3. 為了避免不必要的問題，要寫在data中的值盡量不要用中劃線，可以采用下劃線～如果data中用中劃線的話，需要加單引號(hào)，否則出錯(cuò)，而且，在v-bind中使用時(shí)，也需要加單引號(hào)。加上單引號(hào)又無法識(shí)別數(shù)據(jù)，默認(rèn)為true。
3. 可以傳入多個(gè)屬性動(dòng)態(tài)切換多個(gè)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直接利用對象進(jìn)行綁定，需注意對象中的鍵名應(yīng)與class樣式名保持一致。

5. 數(shù)組綁定

數(shù)組里的變量改變時(shí)，動(dòng)態(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. 綁定返回對象的計(jì)算屬性

強(qiáng)大且常用的模式～

<!--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é)合自身項(xiàng)目情況修改填寫
        }
      }
    }
  }

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

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

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

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

<!--vue代碼-->
    <div ：style="color：selectedColor,fontsize:fontSize + 'px'"></div>

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

2. 也可以使用對象

（可以參照上述class）

<!--vue代碼-->
    <div ：style="styleObject"></div>

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

3. 使用數(shù)組

<!--vue代碼-->
    <div :style="[styleA,styleB]"></div>

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

小伙伴們可根據(jù)上述方法結(jié)合自身項(xiàng)目情況修改調(diào)用，如有問題，歡迎交流

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: