类与样式绑定

前面有介绍过属性动态绑定数据。有两个属性比较特殊：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>

通过数组这种方式，可以非常方便的去操控一组样式。

---

-EOF-