<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>class与style 属性</title>
</head>
<style>
.active,
.activeClass {
color: red;
width: 100px;
border: 1px solid #ccc;
height: 100px;
}
</style>
<body>
<div class="app">
<!---绑定 HTML Class----------------------------->
<!--对象语法-->
<div v-bind:class="{active:at}">2</div>
<div v-bind:class="{active:at,alink:al}">3</div>
<div v-bind:class="obj">4</div>
<div v-bind:class="objClass">5</div>
<!--数组语法-->
<div v-bind:class="[activeClass, errorClass]">数组</div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]">数组</div>
<!--用在组件上-->
<my-component class="baz boo">组件</my-component>
<my-component v-bind:class="{at}">组件</my-component>
<!---绑定内联样式---------------------------->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">内联</div>
<div v-bind:style="styleObject">直接绑定到一个样式对象</div>
<!--数组语法-->
<div v-bind:style="[baseStyles, overridingStyles]">内联数组语法</div>
</div>
</body>
<script src="js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
var vm = new Vue({
el: '.app',
data: {
msg: '',
activeClass: 'active',
errorClass: 'text-danger',
activeColor: 'red',
fontSize: 50,
at: true, //true|false
al: false,
err: null,
isActive: true,
obj: { //可做一个对象
active: true, //true|false
alink: false,
},
baseStyles: {
color: 'red',
'font-size': '20px'
},
styleObject: {
color: 'red',
fontSize: '13px'
},
overridingStyles: {
width: '200px',
fontSize: '63px'
}
},
computed: { //计算属性
objClass: function() { //可做一个对象方法
return {
active: this.at && !this.err, //为true 并且不为null
'text-align': this.err && this.err.type === 'fatal'
}
}
}
});
</script>
</html>