1. class 属性绑定
语法示例
<div id="app">
<div v-bind:class="{ 'active': isActive }"></div>
</div>
说明：
名为app的ID被 Vue实例绑定
active是前边定义的stlye
isActive是一个bool值，true的时候样式被调用
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{ 'active': isActive }"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>
</body>
</html>
-
结果显示
image.png
2. 属性的覆盖
2.1 绑定多个值相互覆盖
语法示例
三个
active，前边相同项的会被后边的覆盖
<div id="app">
<div class="static"
v-bind:class="{ 'active1': true , 'active2': true, 'active3': true}">
</div>
</div>
完整示例
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.red {
background: red;
}
.blue {
background: blue;
}
</style>
</head>
<body>
<div id="app">
<div class="static" v-bind:class="{ 'active': isActive , 'red': hasError, 'blue': true}">
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: true
}
})
</script>
</body>
</html>
- 结果显示
active中定义的绿色会被red中定义的红色覆盖，red中定义的红色又会被后边blue定义的蓝色覆盖，最终显示为蓝色。
而active中定义的大小因为后边都没有定义，因此不会改变
image.png
2.2 绑定一个对象（对象成员间覆盖）
和2.1中效果相同
语法示例
- 绑定一个对象 "classObject"
<div id="app">
<div class="static" v-bind:class="classObject">
</div>
</div>
- Vue实例中，定义classObject的各成员
classObject: {
active: true,
red: true,
blue: true
}
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.red {
background: red;
}
.blue {
background: blue;
}
</style>
</head>
<body>
<div id="app">
<div class="static" v-bind:class="classObject">
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
classObject: {
active: true,
red: true,
blue: true
}
}
})
</script>
</body>
</html>
3. 绑定对象的计算属性
语法示例
- 绑定一个对象
<div id="app">
<div v-bind:class="classObject"></div>
</div>
- 被绑定对象定义在voe示例的计算属性中
computed: {
classObject: function () {
return {
base: true,
active: this.isActive && !this.error.value,
danger: this.error.value && this.error.type === 'fatal',
}
}
}
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.base {
width: 100px;
height: 100px;
}
.active {
background: green;
}
.danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="classObject"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
error: {
value: false,
type: 'fatal'
}
},
computed: {
classObject: function () {
return {
base: true,
active: this.isActive && !this.error.value,
danger: this.error.value && this.error.type === 'fatal',
}
}
}
})
</script>
</body>
</html>
- 结果显示
满足active条件时是绿色方块
满足danger条件时是红色方块
4. 绑定数组
4.1 直接绑定一个数组
语法示例
- 绑定数组
<div v-bind:class="[activeClass, errorClass]"></div>
- 在vue实例中定义数组中的数据
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
</body>
</html>
4.2 覆盖顺序
-
和数组顺序无关
-
和实例中定义值的顺序无关
-
style中定义顺序有关，相同项写在前边的会被后边的覆盖
因此上例中，如果我们如下写，就会显示绿色
<style>
.text-danger {
background: red;
}
.active {
width: 100px;
height: 100px;
background: green;
}
</style>
4.3 绑定一个是数组的object
- 绑定数组的object
<div id="app">
<div v-bind:class="myClass"></div>
</div>
- 在vue实例中定义数组
data: {
myClass: [
'active',
'text-danger'
]
}
4.4 控制数组成员是否生效
语法示例
<div id="app">
<div v-bind:class="[errorClass ,true ? activeClass : '']"></div>
</div>
说明：
- errorClass 一直存在
- activeClass：
true 时，activeClass生效
false时，activeClass不生效。
注意：是否能成功覆盖，和stlye中定义的顺序有关，我们将在后边说明。
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.text-danger {
width: 100px;
height: 100px;
background: red;
}
.active {
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: false,
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
</body>
</html>
- vue实例中
isActive: false时结果
image.png
- vue实例中
isActive: true时结果
image.png
再次强调顺序
和之前说的一样，数组成员覆盖顺序仍然只和style中的顺序有关
因此，我们如果这样写stlye
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
width: 100px;
height: 100px;
background: red;
}
即使 activeClass 生效，一样会被 errorClass 的红色覆盖。
image.png
网友评论