關於vue.js中class與style綁定的練習代碼，分享給大家，供大家參考：
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>
<!-- 數據綁定常見的需求是綁定class和內聯樣式
v-bind 可以綁定屬性class -->
<!-- 這個表示如果isactive是true時 class就與active綁定 -->
<div id="app-1" v-bind:class="{ active: isActive }">
猴猴呀
</div>
<!-- 還可以綁定靜態樣式-->
<div id="app-2" class="static" v-bind:class="{ active: isActive }">
lowrie
</div>
<!-- 還可以直接綁定數據裡的一個對象-->
<div id="app-3" v-bind:class="classObject">
猴猴呀
</div>
<div id="app-4" v-bind:class="[activeClass, errorClass]">
lowrie
</div>
<!-- 關於vue組件會專門再學習 -->
<!-- v-bind綁定內聯樣式與綁定class類似 數組 對象 -->
<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;
};
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。