欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue的Class與Style綁定的方法

 更新時(shí)間:2017年09月01日 14:31:50   作者:PureView  
本篇文章主要介紹了Vue的Class與Style綁定的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了Vue的Class與Style綁定,分享給大家,具體如下:

綁定 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)色的背景顏色。

我們也可以傳入更多的屬性來切換多個(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ì)象的方法來切換屬性

<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:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<script>
  data:{
    activeColor:"blue",
    fontSize:20
  }
</script>

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

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

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

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

<div v-bind:style="[style1,style2]"></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-

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

相關(guān)文章

  • vue如何從后臺(tái)下載.zip壓縮包文件

    vue如何從后臺(tái)下載.zip壓縮包文件

    這篇文章主要介紹了vue如何從后臺(tái)下載.zip壓縮包文件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 示例vue 的keep-alive緩存功能的實(shí)現(xiàn)

    示例vue 的keep-alive緩存功能的實(shí)現(xiàn)

    這篇文章主要介紹了示例vue 的keep-alive緩存功能的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • vue3 學(xué)習(xí)筆記之a(chǎn)xios的使用變化總結(jié)

    vue3 學(xué)習(xí)筆記之a(chǎn)xios的使用變化總結(jié)

    本篇文章主要旨在幫助正在學(xué)vue3或者準(zhǔn)備學(xué)vue3的同學(xué)了解網(wǎng)絡(luò)請(qǐng)求axios該如何使用,防止接觸了一點(diǎn)點(diǎn)vue3的同學(xué)會(huì)有個(gè)疑問。有興趣的小伙伴可以關(guān)注一下
    2021-11-11
  • vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案

    vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案

    在vuex的時(shí)候刷新以后里面存儲(chǔ)的state就會(huì)被瀏覽器釋放掉,因?yàn)槲覀兊膕tate都是存儲(chǔ)在內(nèi)存中的,所以一刷新頁(yè)面就會(huì)把state中的數(shù)據(jù)重置,這就涉及到vue數(shù)據(jù)持久化的問題,這篇文章主要給大家介紹了關(guān)于vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案,需要的朋友可以參考下
    2021-07-07
  • vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼

    vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼

    這篇文章主要介紹了vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-08-08
  • Vue組件間傳值的實(shí)現(xiàn)解析

    Vue組件間傳值的實(shí)現(xiàn)解析

    組件是?vue.js?最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無法相互引用,這篇文章主要介紹了Vue組件間傳值的實(shí)現(xiàn)
    2022-09-09
  • 在Vue3.x中實(shí)現(xiàn)類似React.lazy效果的方法詳解

    在Vue3.x中實(shí)現(xiàn)類似React.lazy效果的方法詳解

    React 的 React.lazy 功能為組件懶加載提供了原生支持,允許開發(fā)者將組件渲染推遲到實(shí)際需要時(shí)再進(jìn)行,雖然 Vue3.x 沒有一個(gè)直接對(duì)應(yīng)的 lazy 函數(shù),但我們可以通過動(dòng)態(tài)導(dǎo)入和 defineAsyncComponent 方法來實(shí)現(xiàn)類似的效果,需要的朋友可以參考下
    2024-03-03
  • 詳解vue項(xiàng)目接入微信JSSDK的坑

    詳解vue項(xiàng)目接入微信JSSDK的坑

    這篇文章主要介紹了詳解vue項(xiàng)目接入微信JSSDK的坑,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • 記錄一個(gè)van-list不斷onLoad加載的坑及解決

    記錄一個(gè)van-list不斷onLoad加載的坑及解決

    這篇文章主要介紹了記錄一個(gè)van-list不斷onLoad加載的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue路由傳參刷新后數(shù)據(jù)丟失問題及解決

    vue路由傳參刷新后數(shù)據(jù)丟失問題及解決

    這篇文章主要介紹了vue路由傳參刷新后數(shù)據(jù)丟失問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03

最新評(píng)論