八、class 与 style 绑定（1）
本章概要
- 绑定 HTML class
- 对象语法
- 数组语法
- 在组件上使用 class 属性
HTML 元素有两个设置样式的属性：class 和 style ，前者用于指定样式表中的 class，后者用于设置内联模式。
在 Vue.js 中可以用 v-bind 指令来处理它们，只需要通过表达式计算出字符串结果即可。
不过，字符串拼接比较玛法，而且容易出错，因此，在将 v-bind 指令用于 class 和 style 时，Vue.js 专门做了增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
8.1 绑定 HTML class
8.1.1 对象语法
可以给 v-bind:class 传递一个对象，以动态地切换 class。如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class绑定</title>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{ active: isActive}"></div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
isActive: true
}
}
}).mount('#app');
</script>
</body>
</html>
**
**中 active 这个 class 存在与否将取决于数据属性 isActive 的值。 isActive 计算为 true 时，这个样式类起作用；反之，则相当于没有加样式。也可以向对象中传入更多属性来动态切换多个 class 。此外，v-bind:class 指令也可以和普通的 class 属性一起使用。如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class绑定</title>
<style>
.static {
border: solid 2px black;
}
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
isActive: true,
hasError: false
}
}
}).mount('#app');
</script>
</body>
</html>
最终渲染结果如下：
<div class="static active"></div>
当属性 isActive 或 hasError 改变时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 “static active text-danger”。
绑定的数据对象如果较为复杂，可以在数据属性中单独定义一个对象，然后绑定它。如下：
<div id="app">
<div v-bind:class="classObject"></div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
classObject:{
active:true,
'text-danger':false
}
}
}
}).mount('#app');
</script>
当然，也可以考虑绑定一个返回对象的计算属性，这是一个非常且强大的模式。如下：
<div id="app">
<div v-bind:class="classObject"></div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
classObject:{
active:true,
'text-danger':false
}
}
},
computed:{
classObject(){
return {
active:this.isActive && !this.error,
'text-danger':this.error && this.error.type === 'fatal'
}
}
}
}).mount('#app');
</script>
8.1.2 数组语法
除了给 v-bind:class 传递对象外，也可以传递一个数组，应用一个 class 列表。如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class绑定</title>
<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 src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}
}).mount('#app');
</script>
</body>
</html>
渲染结果如下：
<div class="active text-danger"></div>
也可以使用三元表达式根据条件切换 class ，如下：
<div v-bind:class="[isActive ? activeClass : '' , errorClass]"></div>
<script>
const vm = Vue.createApp({
data() {
return {
activeClass: 'active',
errorClass: 'text-danger',
isActive:true
}
}
}).mount('#app');
</script>
样式类 errorClass 将始终添加，而 activeClass 只有在 isActive 计算为 true 时才会添加。
当 class 属性的表达式中有多个条件时，这样写比较繁琐，因为可以在数组语法中使用对象语法来简化表达式。如下：
<div v-bind:class="[{active ：isActive }, errorClass]"></div>
8.1.3 在组件上使用 class 属性
当在一个具有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该组件的根元素上。这个元素上已经存在的 class 不会被覆盖。
例如，声明了以下组件：
const app = Vue.createApp({})
app.component('my-component',{
template:`<p class="foo bar">hi</p>`
})
然后在使用该组件时添加一些 class：
<my-component class="baz boo"></my-component>
HTML 将被渲染为：
<p class="foo bar baz boo">hi</p>
对于带数据绑定 class 也同样适用：
<my-component v-bind:class="{active:isActive}"></my-component>
当 isActive 计算为 true 时，HTML 将被渲染为：
<p class="foo bar active">hi</p>
如果组件有多个元素，则需要定义哪个元素来接收这个 class ，这是通过使用 attrs 组件属性来指定的。如下代码：
<div id = "app">
<my-component class="baz"></my-component>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({})
app.component('my-component',{
template:`
<p :class="$attrs.class">hi</p>
<span>this is a child component</span>
`
})
</script>