-
Notifications
You must be signed in to change notification settings - Fork 0
/
2.21-class绑定.html
52 lines (46 loc) · 1.42 KB
/
2.21-class绑定.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<p>给class属性传递一个对象时属性值与实例对象中的data属性绑定,如果值为true则加这个类名;如果为false则不添加这个类。传递一个数组时则直接写类名</p>
<!-- class为active 的更新将取决于数据属性 isActive 是否为真值 。 -->
<div v-bind:class="{ active: isActive }"></div>
<!-- v-bind:class 指令可以与普通的 class 属性共存。 -->
<div class="haha" v-bind:class="{ active: isActive ,pro:val}"></div>
<!-- 直接绑定数据里的一个对象 -->
<div v-bind:class="classObj1"></div>
<!-- 绑定返回对象的计算属性 -->
<div v-bind:class="classObj2"></div>
<!-- 传个数组。对象中对应的属性值是字符串了-->
<div v-bind:class="[activeClass, errorClass]"></div>
<!-- 三元运算 -->
<div v-bind:class="[!isActive ? activeClass : errorClass]"></div>
</div>
<script type="text/javascript">
var vm=new Vue({
el: '#app',
data: {
isActive:true,
val:false,
classObj1:{
active:true,
danger:false
},
classObj2:function(){
return {
show:!this.val,
hide:this.isActive && this.classObj1.active
}
},
activeClass:"class1",
errorClass:"class2"
}
})
</script>
</body>
</html>