vue繫結class與行間樣式style詳解

2022-10-03 09:42:08 字數 1126 閱讀 3762

一、繫結class屬性的方式

1、通過陣列的方式,為元素繫結多個class

window.onload = function()

});}

this is a test string

上例為span 繫結2個class,通過設定re程式設計客棧d_color和bg_color的值,找到對應的class類名

2、通過控制class的true或者false,來使用對應的class類名, true: 使用該class,  false: 不使用該class

window.onload = function()

});}

this is a test string

3、這種方式,跟第二種差不多,只不過是把class的狀態true/false用變數來代替

window.onload = function()

});}

this is a test string

4、為class屬性繫結整個json物件

window.onload = function()

}});

} this is a test string

二、繫結style行間樣式的多種方式

1、使用json格式,直接在行間寫

window.onload = function());

}

this is a test str程式設計客棧ing

2、把data中的物件,作為陣列的某一項,繫結到style

window.onload = function()

}});

} this is a test string

3、跟上面的方式差不多,只不過是為陣列設定了多個物件

window.onload = function(),

b :

}});

}this is a test string

4、直接把data中的某個物件,繫結到style

hnzxrjiwindow.onload = function()

}});

}this is a test string

本文標題: vue繫結class與行間樣式style詳解

本文位址:

Vue繫結class與繫結內聯樣式 v bind

為v bind class設定乙個物件,可以動態切換class class div div script newvue script body 當 class的表示式過長或邏輯複雜時,還可以繫結乙個計算屬性 class classes div div script newvue computed s...

vue中樣式繫結class和style

class style 我是乙個p標籤p style styleobj 我是h1標籤h1 style styleobj,bcolor 11334566h2 class div class classobj click changorder div class classobj div click c...

Vue資料與Class繫結

相容性 在使用vue之前先要了解下它能做什麼不能做什麼。首先,vue支援ie9 及上版本,因為 vue 使用了 ie8 無法模擬的 ecmascript 5 特性。但它支援所有 相容 ecmascript 5的瀏覽器。因為它使用的是物件的getter,setter。這些特性ie9以上才支援,其他非i...