Vue中 Class 與 Style 綁定

lemanli 發(fā)布于2019-08-20 19:05 / 3078人閱讀

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

Class 與 Style 綁定

數據綁定一個常見需求是操作元素的 class 列表和它的內聯(lián)樣式。因為它們都是屬性 。因此，在 v-bind 用于 class 和 style 時， Vue.js 專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組。

綁定 HTML Class 對象語法

我們可以傳給 v-bind:class 一個對象，以動態(tài)地切換 class：

上面的語法表示 classactive 的更新將取決于數據屬性 isActive 是否為真值。
在對象中傳入更多屬性用來動態(tài)切換多個 class。


  
data: {
  isActive: true,
  hasError: false
}

當 isActive 或者 hasError 變化時，class 列表將相應地更新。例如，如果 hasError 的值為 true ， class列表將變?yōu)?"static active text-danger" 。

你也可以直接綁定數據里的一個對象：

也可以在這里綁定返回對象的計算屬性

   
data: {
      isActive: true,
      error: null
    },
    computed:{
        classObject:function(){
            return{
                active:true,
                "text-danger": true,
                 }
            }
    }

數組語法

我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表：

data: {
  activeClass: "active",
  errorClass: "text-danger"
}

如果你也想根據條件切換列表中的 class，可以用三元表達式：

data:{
    isActive:true,
    cls1:"active",
    cls2:"text-danger",
};

可以在數組語法中使用對象語法：

用在組件上

當你在一個自定義組件上用到 class 屬性的時候，這些類將被添加到根元素上面，這個元素上已經存在的類不會被覆蓋。

綁定內聯(lián)樣式 對象語法

綁定到一個樣式對象

data:{
  styleObj:{
   border:"1px solid #ccc",
   color:"red",
   width:"200px"
  },

數組語法

數組語法可以將多個樣式對象應用到一個元素上：

data:{
  styleObj1:{
   border:"1px solid #ccc",
   color:"red",
   width:"200px"
  },
  styleObj2:{
       height:"100px",
       transform:"rotate(20deg)"
  },
};

自動添加前綴

當 v-bind:style 使用需要特定前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測并添加相應的前綴。

多重值

從 2.3.0 起你可以為 style 綁定中的屬性提供一個包含多個值的數組，常用于提供多個帶前綴的值，例如：

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

云服務器 GPU云服務器綁定Style樣式綁定class JS中style屬性 js中改變style

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85132.html

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

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

Shihira 2019-08-23 16:02 評論0 收藏0
004-讀書筆記-Vue官網 Class與Style的綁定

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

hufeng 2019-08-21 17:16 評論0 收藏0
Vue.js如何綁定class和style（內聯(lián)樣式）

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

Chaz 2019-08-20 19:05 評論0 收藏0
Vue 的 Class 與 Style 綁定

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

Eidesen 2019-08-20 19:06 評論0 收藏0
React-JSX實現Class與 Style 動態(tài)綁定

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

phodal 2019-08-23 10:48 評論0 收藏0