<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
.active {
color: red;
}
.TowActive {
color: blue;
}
</style>
<body>
<div id="app-5">
<!-- 1、绑定Class方法 -->
<!-- 对象语法 -->
<div :class="{active:isActive,'text-danger': hasError }">星期一</div>
<div :class="classObj"></div>
<!-- 数组语法 -->
<div :class="[activeClass, errorClass]">星期二</div>
<div :class="[isActive ? activeClass : '', errorClass]">星期三</div>
<div :class="[{ active: isActive }, errorClass]">星期四</div>
<!-- 2、绑定内联样式 -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">星期五</div>
<!-- 对象写法 -->
<div :style="styleObject">星期六</div>
<!-- 数组写法 -->
<div :style="[baseStyles, overridingStyles]">星期天</div>
</div>
</div>
</body>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!',
isActive: true,
hasError: true,
error: null,
// classObj: {
// active: true,
// 'text-danger': false,
// }
activeClass: 'TowActive',
errorClass: 'text-danger',
activeColor: 'green',
fontSize: 30,
styleObject: {
color: 'yellow',
fontSize: '13px'
},
baseStyles: {
fontSize: "25px"
},
overridingStyles: {
color: "pink"
}
},
computed: {
// 事件方法
classObj: function() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
})
</script>
</html>