vue基礎語法之樣式繫結

2021-09-25 16:52:50 字數 1184 閱讀 3989

屬性一般是以is開頭的 作為標誌位 是布林型別的

v-bind:class=''

>

div>

通常適用於需要加多個類名的場景 或者是需要取消類樣式

v-bind:class

='[activeclass, errorclass]'

>

div>

**示例

>

"box"

>

v-bind:class=''

>

測試樣式div

>

v-on:click

='handle'

>

切換button

>

v-bind:class

='[activeclass,bgclass]'

>

測試樣式div

>

v-on:click

='handle1'

>

切換button

>

div>

src=

"./js/vue.js"

>

script

>

>

var vm =

newvue(,

methods:

, handle1:

function()

}})script

>

body

>

物件繫結和陣列繫結可以結合使用[activeclass, errorclass,]

class繫結的值可以簡化操作 直接在data中寫屬性值,用來存放陣列和物件

預設的class的處理方式 預設的class 會保留

v-bind:

style=''

>

div>

v-bind:

style

='[ basestyle,overridingstyles]

'>

div>

陣列的方式兩個樣式有的會覆蓋沒有的新增

vue基礎之樣式繫結(class,style)

陣列 class red thin 這是乙個 的h1h1 陣列中使用三元表示式 class red thin isactive?active 這是乙個 的h1h1 陣列中巢狀物件 class red thin 這是乙個 的h1h1 直接使用物件 class 這是乙個 的h1h1 直接在元素上通過 s...

Vue語法基礎三(樣式繫結)

vue繫結樣式有繫結class和繫結style兩種方式,這兩種方式都有物件語法和陣列語法。一 class繫結 1.1 物件語法 使用js物件的方式,也就是key value的方式,給元素的class屬性繫結樣式,其中key是樣式,value控制key樣式是否有效,value是個布林值。style d...

Vue語法 類名和樣式繫結

通過字串 陣列 和物件三種方式為節點繫結類名屬性 lang en charset utf 8 類名和樣式繫結title color gray size 18 style italic style head class color gray size 18 style italic vue2.0,精誠...