abstract：關(guān)于vue.js中class與style綁定的練習(xí)代碼，分享給大家，供大家參考:html:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs中Class與Style&nb
關(guān)于vue.js中class與style綁定的練習(xí)代碼，分享給大家，供大家參考:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs中Class與Style 綁定</title>
<link rel="stylesheet" href="css/vuetext.css">
</head>
<body>
<!-- 數(shù)據(jù)綁定常見的需求是綁定class和內(nèi)聯(lián)樣式
v-bind 可以綁定屬性class -->
<!-- 這個(gè)表示如果isactive是true時(shí) class就與active綁定 -->
<div id="app-1" v-bind:class="{ active: isActive }">
猴猴呀
</div>
<!-- 還可以綁定靜態(tài)樣式-->
<div id="app-2" class="static" v-bind:class="{ active: isActive }">
lowrie
</div>
<!-- 還可以直接綁定數(shù)據(jù)里的一個(gè)對(duì)象-->
<div id="app-3" v-bind:class="classObject">
猴猴呀
</div>
<div id="app-4" v-bind:class="[activeClass, errorClass]">
lowrie
</div>
<!-- 關(guān)于vue組件會(huì)專門再學(xué)習(xí) -->
<!-- v-bind綁定內(nèi)聯(lián)樣式與綁定class類似 數(shù)組 對(duì)象 -->
<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>js:
var app = new Vue({
el: '#app-1',
data: {
message: 'Hello Vue!',
isActive: true,
}
});
var app2 = new Vue({
el: '#app-2',
data: {
message: 'Hello Vue!',
isActive: true,
}
});
var app3=new Vue({
el:'#app-3',
data: {
classObject: {
active: true,
}
}
});
var app4=new Vue({
el:'#app-4',
data:{
activeClass: 'active',
errorClass: 'text-danger'
}
});css:
.active{
color: #FFA07A;
};更多關(guān)于學(xué)習(xí)vue.js中class與style綁定請(qǐng)關(guān)注PHP中文網(wǎng)（www.miracleart.cn）其它文章！