语法糖 v-bind 缩写成 ： （冒号）
与class的绑定
1.对象语法
:class={className:isActive}一个对象可以动态切换class
2.数组语法
:class=[activeClass]
3.绑定内联样式 :style
与绑定class相同 都有对象语法和数组语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.divStyle{
background: red;
width: 100px;
height: 100px;
}
.active{
background: green;
width: 100px;
height: 100px;
}
.error{
border:1px solid red;
}
</style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<body>
<div id="app">
<div :class="{divStyle:isActive}"></div>
<div :class="[activeClass,errorClass]"></div>
<div :class="[{'active':isActive},error]"></div>
<p :style="{'color':color,'fontSize':fontSize}">这是对象语法</p>
<p :style="[c]">这是数组语法</p>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
isActive:true,
activeClass:'active',
color:'red',
fontSize:'16px',
c:{color:'red'}
}
})
</script>
</html>
4对象语法中使用计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.divStyle{
background: red;
width: 100px;
height: 100px;
}
.active{
background: green;
width: 100px;
height: 100px;
}
.error{
border:1px solid red;
}
</style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<body>
<div id="app">
<div :class="classObject"></div>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
isActive:true,
activeClass:'active',
errorClass:'error'
},
computed:{
classObject(){
return{
active:this.isActive
}
}
}
})
</script>
</html>
