版权声明：本文为博主原创文章，转载请标明出处。 https://blog.csdn.net/dulinanaaa/article/details/80612100
<!DOCTYPE html>
<html>
<head>
<title>page2</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script src="http://bj.xdf.cn/huodong/js/jquery-1.12.3.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="example">
<div v-bind:class="{ active: isActive }">这是要渲染的class</div>
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">这是要渲染的class1
</div>
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError1 }">这是要渲染的class2
</div>
<div v-bind:class="classObject">这是要渲染的class3</div>
<div v-bind:class="classObject1">这是要渲染的class4</div>
<div v-bind:class="[activeClass, errorClass]">这是要渲染的class5</div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]">这是要渲染的class6</div>
<div v-bind:class="[{ active: isActive }, errorClass]">这是要渲染的class7</div>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">这是要渲染的style1</div>
<div v-bind:style="styleObject">这是要渲染的style2</div>
<div v-bind:style="[baseStyles, overridingStyles]">这是要渲染的style3</div>
</div>
<script>
var vm = new Vue({
el : '#example',
data : {
isActive : true,
hasError : false,
hasError1 : true,
classObject : {
active : true,
'text-danger' : false,
aaa : true,
bbb : false,
'txt-aaa' : true
},
activeClass : 'active',
errorClass : 'text-danger',
activeColor : 'red',
fontSize : 30,
styleObject : {
color : 'red',
fontSize : '13px'
},
baseStyles : {
color : 'green'
},
overridingStyles : {
color : 'blue',
fontSize : '20px'
}
},
computed : {
classObject1 : function() {
return {
active : this.isActive && !this.error,
'text-danger' : this.error
&& this.error.type === 'fatal'
}
}
}
})
</script>
</body>
</html>