動態class與style 靜態class

2021-10-21 01:38:11 字數 1041 閱讀 2472

好喜歡她呀,喜歡的不得了。(應該不會有人看到吧)

詳解:通過vue中的v-bind來動態繫結標籤的類名與樣式

>

class

="home"

>

:class=""

>

物件形式繫結classp

>

:class

="[black,yellow]"

>

陣列形式動態繫結classp

>

:style

="styledata

">

動態繫結stylep

>

div>

template

>

>

export

default

, black:

'timi'

, yellow:

'tianmei'

, isblack:

true

, isyellow:

true}}

}script

>

lang

='scss'

scoped

>

.timi

.tianmei

.black

.yellow

style

>

利用陣列的形式,陣列中可以摻雜物件型別class

size

="small"

:class

="[,'border-top-right-radius-0','border-bottom-right-radius-0']"

@click

="ming"

>

明細el-button

>

03 動態新增class和style

class樣式 class樣式 class樣式 style樣式 style樣式 style樣式 動態新增class,可以在原有的class上再加上乙個class。用v bind class或縮寫 class 可以用三目運算動態新增class,也可以在字典裡的key為class,然後data裡面返回這...

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