绑定 Class
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>class</title>
<style>
span{
display:inline-block;
}
.static{
border:5px solid #000;
}
.active{
width:100px;
height:100px;
color:#000;
}
.text-danger{
background: greenyellow;
}
</style>
</head>
<body>
<div id="class">
<span class="static" v-bind:class="{ active: activeClass, 'text-danger': errorClass }">1</span>
<span v-bind:class="[activeClass, errorClass]">2</span>
<span v-bind:class="classObject">3</span>
<span v-bind:class="classObject1">4</span>
<span v-bind:class="[isActive ? activeClass : ' ', errorClass]">5</span>
<!--始终添加 errorClass ，但是只有在 isActive 是 true 时添加 activeClass -->
<!--可写为：<div v-bind:class="[isActive : activeClass, errorClass]">5</div>-->
<my-component class="static"></my-component>
<!--可写为：<my-component v-bind:class="{ static: isActive }"></my-component>-->
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component', {
template: '<span class="active text-danger">6</span>'
});
var vm = new Vue({
el:"#class",
data: {
activeClass: 'active',
errorClass: 'text-danger',
classObject: {
active: true,
'text-danger':true
},
isActive: true,
error: null
},
computed: {
classObject1: function () {
return {
active: this.isActive && !this.error,
'text-danger': !this.error
}
}
}
})
</script>
</body>
</html>
绑定Style
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>style</title>
</head>
<body>
<div id="style">
<span v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }">1</span>
<span v-bind:style="styleObject">4</span>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#style",
data: {
activeColor: 'red',
fontSize:16,
styleObject: {
color: 'red',
fontSize: '16px'
}
}
})
</script>
</body>
</html>
