Vue語法 類名和樣式繫結

通過字串、陣列、和物件三種方式為節點繫結類名屬性:

lang
="en"
>
>
charset
="utf-8"
>
>
類名和樣式繫結title
>
>
.color-gray
.size-18
.style-italic
style
>
head
>
>
>
class
="color-gray size-18 style-italic"
>
vue2.0,精誠所至，金石為開p
>
:class
="classstr"
>
vue2.0,精誠所至，金石為開p
>
:class
="classarr"
>
vue2.0,精誠所至，金石為開p
>
:class
="classobj1"
>
vue2.0,精誠所至，金石為開p
>
:class
="classobj2"
>
vue2.0,精誠所至，金石為開p
>
div>
src=
"">
script
>
>
newvue(,
classobj2:}}
});script
>
body
>
html
>

為了方便，我將**寫在了一起

lang
="en"
>
>
charset
="utf-8"
>
>
類名和樣式繫結title
>
>
.color-gray
.size-18
.style-italic
style
>
head
>
>
>
類名繫結：
class
="color-gray size-18 style-italic"
>
vue2.0,精誠所至，金石為開p
>
:class
="classstr"
>
vue2.0,精誠所至，金石為開p
>
:class
="classarr"
>
vue2.0,精誠所至，金石為開p
>
:class
="classobj1"
>
vue2.0,精誠所至，金石為開p
>
:class
="classobj2"
>
vue2.0,精誠所至，金石為開p
>
樣式繫結：
style
="color
:gray;
font-size
:18px;
font-style
:italic;
">
vue2.0,精誠所至，金石為開p
>
:style
="stylestr
">
vue2.0,精誠所至，金石為開p
>
:style
="styleobj1
">
vue2.0,精誠所至，金石為開p
>
:style
="styleobj2
">
vue2.0,精誠所至，金石為開p
>
div>
src=
"">
script
>
>
newvue(,
classobj2:
,/*樣式繫結*/
stylestr:
'color:gray;font-size:18px;font-style:italic;'
,//拼接字串
styleobj1:
, styleobj2:}}
});script
>
body
>
html
>

vue 繫結類名和樣式

1.通過v bind繫結類名格式 class 需要繫結類名 注意點 1.直接賦值乙個類名 沒有放到陣列中 預設回去model中查詢 2.陣列中的類名沒有用引號括起來也會去model中查詢 3.陣列的每乙個元素都可以是乙個三目運算子按需匯入。例如 class flag?active 4.可以使用物件來...

VUE之v bind類名與樣式繫結

v bind 語法格式1 單個語法格式 語法格式2 物件語法格式 語法格式3 陣列語法格式 繫結類名 class 物件語法 單類名切換 語法 傳給 v bind class 乙個物件，以動態地切換 class 1 給v bind class設定乙個物件，可以動態切換class。data isacti...

Vue之v bind類名與樣式繫結

v bind class classfn v bind title titlefn v bind href hreffn v bind target targetfn data isactive為true時，結果為下圖 isactive為false時，結果為下圖 上面案例中，類名active依賴於資...