Vue 的 Class 與 Style 繫結

2021-09-16 13:09:09 字數 932 閱讀 2079

我們可以傳給 v-bind:class 乙個物件，以動態地切換 class：
如上，我們先給 .exp 乙個邊框，我們利用 v-bind 方法傳入乙個新的 class 屬性 .newexp，設定乙個藍色的背景顏色。當我們在控制台修改 .newexp 的屬性為 true 時，會給 div 新增乙個藍色的背景顏色。

我們也可以傳入更多的屬性來切換多個 class 。
在模板裡的渲染結果為：
我們也可以使用物件的方法來切換屬性
渲染結果和上面的一樣

我們可以把乙個陣列傳給 v-bind:class，以應用乙個 class 列表：
渲染為：
要切換class，使用三元運算子：
使用物件語法的話，會看起來更加清晰
v-bind:style 的陣列語法可以將多個樣式物件應用到乙個元素上：
當 v-bind:style 使用需要特定字首的 css 屬性時，如 transform，vue.js 會自動偵測並新增相應的字首。

chrome 和 safari : -webkit-


ie :               -ms-


firfox :           -moz-


opera :            -o-

Vue的Class 與 Style 繫結

如果想冬天改變class的樣式，一般有以下幾種寫法 1 物件語法 0 這樣表示當totalcount 0時，highlight這個樣式有效 繫結多個class 和如下 data data 結果渲染為 當isactive或者haserror變化時，class 列表將相應地更新。例如，如果haserro...

Vue入門 Class 與 Style 繫結

class static class div 可將物件繫結在class屬性上，動態切換class v bind class與普通class可共存。可繫結data中的物件，或計算屬性。class activeclass,errorclass div data 在陣列中巢狀表示式 class activ...

Vue學習 Class與Style繫結

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