马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2018-9-6 18:14 编辑
上一讲我们搞定了计算属性的玩法，本次来学习用对象语法来绑定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>
反之，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类
答案：
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢Vue，请订阅 专辑（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-9-6 17:36:16
置顶卡
千斤顶
显身卡
发表于 2018-10-11 15:08:33
发表于 2018-11-26 23:27:28
