Vue學習之路三 Class與Style繫結

2021-09-01 20:32:20 字數 1661 閱讀 7476

1. 物件語法

a. 新增單個物件
上面的語法表示 active 這個 class 存在與否將取決於資料屬性 isactive為真還是假。

b. 新增多個物件



data:
結果渲染為：
c. 繫結的資料物件不必內聯定義在模板裡


data: 


}
d. 返回乙個物件的計算屬性


data: ,


computed: 


} }
2. 陣列語法

a. 常規操作版



data:
渲染結果為
b. 如果你也想根據條件切換列表中的 class，可以用三元表示式：
這樣寫將始終新增 errorclass，但是只有在 isactive 是true 時才新增 activeclass。

c. 在陣列語法中也可以使用物件語法：
當在乙個自定義元件上使用 class 屬性時，這些類將被新增到該元件的根元素上面。這個元素上已經存在的類不會被覆蓋。

vue.component('my-component', )
然後在使用它的時候新增一些 class：

html 將被渲染為:

hi
對於帶資料繫結 class 也同樣適用：

當 isactive 為 true 時，html 將被渲染成為：

hi
1. 物件語法

css 屬性名可以用駝峰式 (camelcase) 或短橫線分隔 (kebab-case，記得用單引號括起來) 來命名：



data:｛


activecolor: red,


fontsize: 30


｝
直接繫結到乙個樣式物件通常更好，這會讓模板更清晰：



data: 


}
同樣的，物件語法常常結合返回物件的計算屬性使用。

2. 陣列語法

v-bind:style 的陣列語法可以將多個樣式物件應用到同乙個元素上：
3. 自動新增字首

當 v-bind:style 使用需要新增瀏覽器引擎字首的 css 屬性時，如 transform，vue.js 會自動偵測並新增相應的字首。

4. 多重值

從 2.3.0 起你可以為 style 繫結中的屬性提供乙個包含多個值的陣列，常用於提供多個帶字首的值，例如：
這樣寫只會渲染陣列中最後乙個被瀏覽器支援的值。在本例中，如果瀏覽器支援不帶瀏覽器字首的 flexbox，那麼就只會渲染 display: flex。

vue學習之路 class與style繫結

通過class與style繫結可以實現，標籤樣式的切換，實現頁面樣式動態變化。1.物件語法 這裡通過isactive控制active這個class的存在與否。classobject也可以直接使用物件，這樣html會更簡單明瞭。甚至還可以使用計算屬性 copmuted 然後實現更會複雜的控制。2.陣列...

Vue學習 Class與Style繫結

class和style繫結，使用v bind處理，並在v bind上對表示式的結果型別進行了擴充套件，除了字串之外還可以是物件或陣列。1 物件 1 v bind的class可以與普通的class屬性共存 2 v bind的class可以將物件寫入到class中 3 v bind的class可以將物件...

vue學習之路

1 v 檢視，代表前端的html 結構 2 m 資料模型，代表資料層，在vue中 例如 data 3 vm 檢視模型，代表排程層，是mvvm模式的核心，是m和v之間的橋梁在vue中例如 var vm new vue 1 v clack指令 作用 解決頁面載入時閃爍問題 用法 在標籤中直接新增v cl...