009 V 绑定class之对象语法
本帖最后由 不二如是 于 2018-9-6 18:14 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们搞定了计算属性的玩法，本次来学习用对象语法来绑定class。
在006 V 指令+事件+语法糖我们介绍了v-bind，以及其简略写法":"。
我们给v-bing:class设置一个对象，达到动态切换class，代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《Vue-庖丁解牛》案例演示">
<meta name="author" content="鱼C工作室">
<title>鱼C-Vue</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="myApp">
<div :class="{'active':isActive}"></div>
</div>
<script>
var app = new Vue({
el:"#myApp",
data:{
isActive:true
}
})
</script>
</body>
</html>
在这段代码中，类名active依赖于数据isActive，当为true，div会拥有类名Active。
反之，false，则不会添加类名。
最终渲染结果：
对象中还可以传入多个属性，这样就能切换多个属性，:class(v-bind:class)可以和普通的class共存。
创建div：
<div id="myApp">
<div class="fishc" :class="{'active':isActive,'error':isError}"></div>
</div>
内层div有一个默认的普通类名fishc，然后通过:classs添加了两个类名（均为真才会添加）。
创建Vue实例：
<script>
var app = new Vue({
el:"#myApp",
data:{
isActive:true,
isError:false
}
})
</script>
在Vue实例中，isActive为true，成功添加isActive类；isError为false，所以添加失败。
现在修改isError为true：
当:class的表达式过长或者逻辑复杂时，还可以绑定一个计算属性，很常用的用法。
一般当条件多于两个时，可以使用data或computed。
创建div：
<div id="myApp">
<div :class="myClass"></div>
</div>
创建Vue实例：
<script>
var app = new Vue({
el:"#myApp",
data:{
isActive:true,
isError:null
},
computed:{
myClass:function () {
return{
active:this.isActive && !this.error,
'text-fail':this.error && this.error.type == 'fail'
}
}
}
})
</script>
我们把复杂的表达式独立出来，放在computed中通过计算属性来完成。
课后作业
1、:class可以和普通的class共存？（T/F）
2、完成修改isError，为div添加isError类
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 已学习,谢谢老板 {:9_241:} T 1 00 T
isError:true
页:
[1]