Vue資料與Class繫結

2021-08-28 05:19:20 字數 907 閱讀 7607

相容性

在使用vue之前先要了解下它能做什麼不能做什麼。首先,vue支援ie9

及上版本,因為 vue 使用了 ie8 無法模擬的 ecmascript 5 特性。但它支援所有

相容 ecmascript 5的瀏覽器

因為它使用的是物件的getter,setter。這些特性ie9以上才支援,其他非ie系瀏覽器基本都支援

資料繫結

繫結文字:}

繫結屬性:v-bind:屬性名=」 繫結鍵名」 ,它有一種縮寫:「:屬性名 = 繫結鍵名」

繫結dom:v-if=」繫結鍵名(必須是boolean型別)」

class和style繫結

繫結html class

我們可以傳給v-bind:class乙個物件,以動態切換class,至於裡面的class是否顯示,則又bool值來確定。它有兩種顯示設定方式:

在html

中放置鍵值對

在html

中方式物件鍵

type

="button"

v-bind:class

="classobj">

js: …

data: }

繫結內聯樣式

我們可以用v-bind:style來繫結css,css 屬性名可以用駝峰式 (camelcase) 或短橫線分隔 (kebab-case,記得用單引號括起來) 來命名。但不推薦這種寫法。

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可以將物件...

Vue的Class 與 Style 繫結

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