vue-class动态绑定样式
1、三目写法
2、对象写法
:class=“classObject”
data() {
return {
classObject:{ active: true, sort:false }
}
}
3、数组写法
:class="[isActive,isSort]"
data() {
return{
isActive:‘active’,
isSort:‘sort’
}
}
练习案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<div style="background:green">普通stype</div>
<div :class="isActive?'red':'yellow'">动态绑定class,三目方法</div>
<div :class="classobj">动态绑定class,对象方法</div>
<div :class="classarr">动态绑定class,数组方法</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#box',
data: {
isActive: true,
classobj:{
a:true,
b:true
},
classarr:["a","b"]
}
})
</script>
</body>
</html>