這篇文章主要為大家展示了“Vue中Class與Style綁定的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue中Class與Style綁定的示例分析”這篇文章吧。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)銀州免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千余家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

具體如下：

綁定 HTML Class

對(duì)象語(yǔ)法

我們可以傳給 v-bind:class 一個(gè)對(duì)象，以動(dòng)態(tài)地切換 class：

<style>
  .exp{
    border: 1px solid #ccc;
  }
  .forExp{
    background: blue;
  }
</style>
<div class="exp" v-bind:class="{newExp:isNewExp}"></div>
<script>
  var exp=new Vue({
    el:".exp".
    data:{
      isForExp:false
    }
  })
</script>

如上，我們先給 .exp 一個(gè)邊框，我們利用 v-bind 方法傳入一個(gè)新的 class 屬性 .newExp，設(shè)置一個(gè)藍(lán)色的背景顏色。當(dāng)我們?cè)诳刂婆_(tái)修改 .newExp 的屬性為 true 時(shí)，會(huì)給 div 添加一個(gè)藍(lán)色的背景顏色。

我們也可以傳入更多的屬性來(lái)切換多個(gè) class 。

<div class="exp" v-bind:class="{newExp:isExp,npc:isNpc}"></div>
<script>
  data:{
    isExp:false,
    isNpc:true
  }
</script>

在模板里的渲染結(jié)果為：

<div class="exp isNpc"></div>

我們也可以使用對(duì)象的方法來(lái)切換屬性

<div class="exp" v-bind:class="obj"></div>
<script>
  data:{
    obj:{
      newExp:false,
      npc:true
    }
  }
</script>

渲染結(jié)果和上面的一樣

數(shù)組語(yǔ)法

我們可以把一個(gè)數(shù)組傳給 v-bind:class，以應(yīng)用一個(gè) class 列表：

<div class="exp" v-bind:class="[newExp,oldExp]"></div>
<script>
  data:{
    newExp:"new",
    oldExp:"old"
  }
</script>

渲染為：

<div class="exp new old"></div>

要切換class，使用三元運(yùn)算符：

<div class="exp" v-bind:class="[act? newExp:oldExp]"></div>
<script>
  data{
    newExp:"new",
    oldExp:"old",
    act:true
  }
<script>

act 為 true 時(shí)，添加 new ，為 false 時(shí)添加 old。

用在組件上

聲明一個(gè)組件：

Vue.component("my", {
  template: '<p class="foo bar">Hi</p>'
})

然后在使用它的時(shí)候添加一些 class：

<my class="tip"></my>

最終渲染為

<p class="foo bar tip">Hi</p>

同樣的適用于綁定 HTML class:

<my v-bind:class="{ active: isActive }"></my>

當(dāng)active為true時(shí)，HTML 將被渲染成為：

<p class="foo bar active">Hi</p>

綁定內(nèi)聯(lián)樣式

對(duì)象語(yǔ)法

v-bind:style 的對(duì)象語(yǔ)法十分直觀——看著非常像 CSS，其實(shí)它是一個(gè) JavaScript 對(duì)象。 CSS 屬性名可以用駝峰式 (camelCase) 或 (配合引號(hào)的) 短橫分隔命名 (kebab-case)：

<div v-bind:></div>
<script>
  data:{
    activeColor:"blue",
    fontSize:20
  }
</script>

使用對(duì)象語(yǔ)法的話，會(huì)看起來(lái)更加清晰

<div v-bind:></div>
<script>
  data:{
    obj:{
      color:"#FFF",
      fontSize:"20px"
    }
  }
</script>

數(shù)組語(yǔ)法

v-bind:style 的數(shù)組語(yǔ)法可以將多個(gè)樣式對(duì)象應(yīng)用到一個(gè)元素上：

<div v-bind:></div>
<script>
  data:{
    style1:{
      color:"#666"
    },
    style2:{
      background:"#b1b1b1"
    }
  }
</script>

自動(dòng)添加前綴

當(dāng) v-bind:style 使用需要特定前綴的 CSS 屬性時(shí)，如 transform，Vue.js 會(huì)自動(dòng)偵測(cè)并添加相應(yīng)的前綴。

Chrome 和 Safari : -webkit-
IE :        -ms-
Firfox :      -moz-
Opera :      -o-

以上是“Vue中Class與Style綁定的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：Vue中Class與Style綁定的示例分析
網(wǎng)站網(wǎng)址：http://chinadenli.net/article30/gecipo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、App設(shè)計(jì)、搜索引擎優(yōu)化、外貿(mào)建站、品牌網(wǎng)站制作、

廣告

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