成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue中 Class 與 Style 綁定

lemanli / 3085人閱讀

摘要：與綁定數(shù)據(jù)綁定一個常見需求是操作元素的列表和它的內(nèi)聯(lián)樣式。表達(dá)式的結(jié)果類型除了字符串之外，還可以是對象或數(shù)組。綁定對象語法我們可以傳給一個對象，以動態(tài)地切換上面的語法表示的更新將取決于數(shù)據(jù)屬性是否為真值。

Class 與 Style 綁定 
數(shù)據(jù)綁定一個常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。因為它們都是屬性 。因此，在 v-bind 用于 class 和 style 時， Vue.js 專門增強(qiáng)了它。表達(dá)式的結(jié)果類型除了字符串之外，還可以是對象或數(shù)組。
綁定 HTML Class 對象語法 
我們可以傳給 v-bind:class 一個對象，以動態(tài)地切換 class：
  
上面的語法表示 classactive 的更新將取決于數(shù)據(jù)屬性 isActive 是否為真值 。    
在對象中傳入更多屬性用來動態(tài)切換多個 class。


  
data: {
  isActive: true,
  hasError: false
}  
當(dāng) isActive 或者 hasError 變化時，class 列表將相應(yīng)地更新。例如，如果 hasError 的值為 true ， class列表將變?yōu)?"static active text-danger" 。
你也可以直接綁定數(shù)據(jù)里的一個對象：

   
1


  
  
也可以在這里綁定返回對象的計算屬性
   
data: {
      isActive: true,
      error: null
    },
    computed:{
        classObject:function(){
            return{
                active:true,
                "text-danger": true,
                 }
            }
    }
數(shù)組語法 
我們可以把一個數(shù)組傳給 v-bind:class，以應(yīng)用一個 class 列表：
  
data: {
  activeClass: "active",
  errorClass: "text-danger"
}  
如果你也想根據(jù)條件切換列表中的 class，可以用三元表達(dá)式：
1
  
data:{
    isActive:true,
    cls1:"active",
    cls2:"text-danger",
};  
可以在數(shù)組語法中使用對象語法：
用在組件上 
當(dāng)你在一個自定義組件上用到 class 屬性的時候，這些類將被添加到根元素上面，這個元素上已經(jīng)存在的類不會被覆蓋。
綁定內(nèi)聯(lián)樣式 對象語法 
綁定到一個樣式對象
  
data:{
  styleObj:{
   border:"1px solid #ccc",
   color:"red",
   width:"200px"
  },
數(shù)組語法 
數(shù)組語法可以將多個樣式對象應(yīng)用到一個元素上：
1
  
data:{
  styleObj1:{
   border:"1px solid #ccc",
   color:"red",
   width:"200px"
  },
  styleObj2:{
       height:"100px",
       transform:"rotate(20deg)"
  },
};
自動添加前綴 
當(dāng) v-bind:style 使用需要特定前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測并添加相應(yīng)的前綴。
多重值 
從 2.3.0 起你可以為 style 綁定中的屬性提供一個包含多個值的數(shù)組，常用于提供多個帶前綴的值，例如：

  
在這個例子中，如果瀏覽器支持不帶瀏覽器前綴的 flexbox，那么渲染結(jié)果會是 display: flex。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85132.html

相關(guān)文章

  • Vue.js-計算屬性和class與style綁定

    摘要：每一個計算屬性都包含一個和一個。使用計算屬性的原因在于它的依賴緩存。及與綁定的主要用法是動態(tài)更新元素上的屬性。測試文字當(dāng)?shù)谋磉_(dá)式過長或邏輯復(fù)雜時，還可以綁定一個計算屬性。 學(xué)習(xí)筆記：前端開發(fā)文檔 計算屬性 所有的計算屬性都以函數(shù)的形式寫在Vue實例中的computed選項內(nèi)，最終返回計算后的結(jié)果。 計算屬性的用法 在一個計算屬性中可以完成各種復(fù)雜的邏輯，包括運算、函數(shù)調(diào)用等，只要最終...

    Shihira 評論0 收藏0

  • 004-讀書筆記-Vue官網(wǎng) Class與Style的綁定

    摘要：綁定綁定，使用，簡寫的形式是。綁定比較靈活，可以使用表達(dá)式字符串對象或數(shù)組。綁定字符串綁定字符串的時候只能綁定一個，不能綁定多個。 1.綁定Class 綁定Class，使用 v-bind:class，簡寫的形式是 :class。綁定Class比較靈活，可以使用表達(dá)式、字符串、對象或數(shù)組。 1-1 搭建結(jié)構(gòu) 首先，新建一些 class 樣式： .colorRed { colo...

    hufeng 評論0 收藏0

  • Vue.js如何綁定class和style（內(nèi)聯(lián)樣式）

    摘要：我們還可以綁定返回對象的計算屬性。用在組件上輸出這同樣適用于綁定輸出綁定內(nèi)聯(lián)樣式對象語法的對象語法十分直觀看著非常像，其實它是一個對象。 vue的class和style綁定 綁定html class 對象語法 我們可以傳給 v-bind:class 一個對象，以動態(tài)地切換 class： 上面的語法表示 class active 的更新將取決于數(shù)據(jù)屬性 isActive 是否為真值 。...

    Chaz 評論0 收藏0

  • Vue 的 Class 與 Style 綁定

    摘要：當(dāng)我們在控制臺修改的屬性為時，會給添加一個藍(lán)色的背景顏色。我們也可以傳入更多的屬性來切換多個。和上一篇的模板語法和計算屬性下一篇的條件渲染和列表渲染 Class 與 Style 綁定 上一篇：Vue 的模板語法和計算屬性 ：https://segmentfault.com/a/11...下一篇：Vue 的條件渲染和列表渲染 ：https://segmentfault.com/a/11....

    Eidesen 評論0 收藏0

  • React-JSX實現(xiàn)Class與 Style 動態(tài)綁定

    摘要：錯誤例子可以實現(xiàn)的語法如下使用邏輯運算符文件文件使用三元運算符文件使用函數(shù)綁定的數(shù)據(jù)對象也不必內(nèi)聯(lián)定義在模板里可以定義一個函數(shù)，類似中的鉤子函數(shù)。 作者：羽徵 摘要：操作元素的 class 列表和內(nèi)聯(lián)樣式是數(shù)據(jù)綁定的一個常見需求，頻繁操作dom元素會降低javascript性能，為了實現(xiàn)高性能js，動態(tài)綁定class和style是高素養(yǎng)程序員的必選。本文以React-JSX語法為基礎(chǔ)，...

    phodal 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<