类与样式绑定
前面有介绍过属性动态绑定数据。有两个属性比较特殊：class 和 style
这两个用得很多，如果数据那一边使用字符串拼接很容易出错。因此 Vue 针对这两个属性提供了特殊的功能增强。除了字符串的值以外还可以是对象和数组。
绑定类
对象语法
可以给 class 绑定一个对象来切换 class，该对象的键就是要挂上去的样式类，值对应的是一个布尔值，true 表示挂上去，false 表示不挂上去。
<template>
<div
class="demo"
:class="{
active: isActive,
'text-danger': hasError
}"
>
绑定样式类
</div>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(true)
const hasError = ref(false)
setTimeout(() => {
hasError.value = true
}, 3000)
</script>
<style scoped></style>
如果一个元素要挂的类比较多，那么推荐将对象写到数据里面，不要写到模板里面：
<template>
<div class="demo" :class="classObj">绑定样式类</div>
</template>
<script setup>
import { reactive } from 'vue'
const classObj = reactive({
active: true,
isFinite: true,
'text-danger': false
})
setTimeout(() => {
classObj['text-danger'] = true
}, 3000)
</script>
<style scoped></style>
这样做的好处在于模板会比较清爽。
另外，也可以绑定一个计算属性的样式对象：
<template>
<div class="demo" :class="classObj">绑定样式类</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const isActive = ref(true)
const error = ref(null)
const classObj = computed(() => {
return {
active: isActive.value && !error.value,
'text-danger': error.value && error.value.type === 'fatal'
}
})
setTimeout(() => {
error.value = {
type: 'fatal'
}
}, 3000)
</script>
<style scoped></style>
数组语法
数组语法中，数组的每一项一般都是一个 ref 值，ref 所对应的就是真实的要挂上去的类
<template>
<div class="demo" :class="[isActive, error]">绑定样式类</div>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref('active')
const error = ref('text-danger')
setTimeout(() => {
isActive.value = 'normal'
}, 3000)
</script>
<style scoped></style>
数组里面，是支持三目运算表达式的：
<template>
<div :class="[isActive ? activeClass : '', errorClass]">绑定样式类</div>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(false)
const activeClass = ref('active')
const errorClass = ref('text-danger')
setTimeout(() => {
isActive.value = true
}, 3000)
</script>
<style lang="scss" scoped></style>
另外，三目运算表达式可能依赖多个条件，这个时候就会显得该表达式非常冗长，此时可以在数组里面使用嵌套对象的方式：
<div :class="[{ active: isActive }, errorClass]"></div>
绑定内连样式
内连样式，也就是 style 的绑定，这个更加需要功能增强。
对象方式
<template>
<div
:style="{
color: activeColor,
fontSize: fontSize + 'px'
}"
>
绑定内连样式
</div>
</template>
<script setup>
import { ref } from 'vue'
const activeColor = ref('red')
const fontSize = ref(30)
setTimeout(() => {
activeColor.value = 'blue'
}, 3000)
</script>
<style lang="scss" scoped></style>
style 绑定的是一个对象，对象的键是样式名称，值对应的是 ref 形式的属性值。
同样可以将 style 所绑定的对象在 script 里面进行声明，这样模板会更加清爽一些
<template>
<div :style="styleObj">绑定内连样式</div>
</template>
<script setup>
import { reactive } from 'vue'
const styleObj = reactive({
color: 'red',
fontSize: '30px'
})
</script>
<style lang="scss" scoped></style>
数组方式
数组的方式是结合着上面的对象的形式来使用的，在数组中会绑定多个样式对象：
<template>
<div :style="styleArr">绑定内连样式</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const styleObj = reactive({
color: 'red',
fontSize: '30px'
})
const styleObj2 = reactive({
textDecoration: 'underline'
})
const styleArr = ref([styleObj, styleObj2])
setTimeout(() => {
styleArr.value.pop()
}, 3000)
</script>
<style lang="scss" scoped></style>
通过数组这种方式，可以非常方便的去操控一组样式。