在Vue中，通过更改元素的class属性可以更改元素的样式，而对class属性的操作可以通过v-bind来实现。

使用v-bind绑定class属性时，可以将class属性值绑定为字符串、对象或数组，下面分别进行讲解。

1. 将class属性值绑定为字符串

在Vue中，可以将class属性值绑定为字符串，示例代码如下。

<template>
  <div v-bind:class="className"></div>
</template>
<script setup>
const className = 'box'
</script>

当上述代码运行后，div元素的渲染结果如下。

<div class="box"></div>

演示如何为class属性绑定字符串

<template>
  <div v-bind:class="className">梦想</div>
</template>
<script setup>
const className = 'box'
</script>
<style>
.box {
  border: 1px solid black;
}
</style>

2. 将class属性值绑定为数组

在Vue中，v-bind指令中的class属性值除了字符串和对象外，还可以是一个数组，用以动态地切换HTML的class属性，数组中的每个元素为要绑定的类名。

将class属性值绑定为数组的示例代码如下。

<template>
  <div v-bind:class="[className1, className2]"></div>
</template>
<script setup>
import { ref } from 'vue'
const className1 = ref('active')
const className2 = ref('error')
</script>

运行上述代码后，div元素的渲染结果如下。

<div class="active error"></div>

如果想有条件地切换列表中的class，可以使用三元表达式，示例代码如下。

<div v-bind:class="[isActive ? className1 : className2]"></div>

当class有多个条件时，在数组语法中也可以使用对象语法，示例代码如下。

<div v-bind:class="[{ active: isActive }, className2]"></div>

演示如何为class属性绑定数组

<template>
  <div v-bind:class="[activeClass, borderClass]"></div>
  <div v-bind:class="[isActive ? activeClass : '', borderClass]"></div>
  <div v-bind:class="[{ active: isActive }, borderClass]"></div>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(true)
const activeClass = ref('active')
const borderClass = ref('border')
</script>
<style>
.active {
  width: 100px;
  height: 10px;
  margin-bottom: 2px;
  background-color: rgb(59, 192, 241);
}
.border {
  border: 2px solid rgb(0, 0, 0);
}
</style>

3. 将class属性值绑定为对象

在Vue中，可以将class属性值绑定为对象，从而动态地改变class属性值。对象中包含的属性名表示类名，属性值为布尔类型，如果属性值为true，表示类名生效，否则类名不生效。将class属性值绑定为对象的示例代码如下。

<template>
  <div v-bind:class="{ className: isActive }"></div>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(true)
</script>

运行上述代码后，div元素的渲染结果如下。

<div class="className"></div>

使用v-bind绑定的class属性可以与普通的class属性共存，示例代码如下。

<div class="className1" v-bind:class="{ className2: isActive }"></div>

在上述代码中，当isActive为true时，div元素的渲染结果如下。

<div class="className1 className2"></div>

在使用v-bind绑定class属性时，如果不想将对象类型的class属性值直接写在模板中，可以将属性值定义成一个响应式对象或一个返回对象的计算属性，示例代码如下。

<template>
  <div v-bind:class="classObject1"></div>
  <div v-bind:class="classObject2"></div>
</template>
<script setup>
import { reactive, ref, computed } from 'vue'
const classObject1 = reactive({ className: true })
const isActive = ref(true)
const classObject2 = computed(() => ({
  className: isActive.value
}))
</script>

演示如何为class属性绑定对象

<template>
  <div class="text" v-bind:class="{ box: isBox, border: isBorder }">
    <div v-bind:class="{ inner: isInner }">春夏</div>
    <div v-bind:class="classObject">秋冬</div>
    <div v-bind:class="classMeal">三餐四季~</div>
  </div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
const isBox = ref(true)
const isBorder = ref(true)
const isInner = ref(true)
const isMeal = ref(true)
const classObject = reactive({ inner: true })
const classMeal = computed(() => ({
  meal: isMeal.value
}))
</script>
<style>
.text {
  text-align: center;
  line-height: 30px;
}
.box {
  width: 100%;
  background: linear-gradient(white, rgb(239, 250, 86));
}
.border {  border: 2px dotted black; }

在Vue中，通过更改元素的style属性也可以更改元素的样式，对style属性的操作也可以通过v-bind来实现。使用v-bind绑定style属性时，可以将style属性值绑定为对象或数组，下面分别进行讲解。

1. 将style属性绑定为数组

将style属性绑定为数组，可以实现将多个样式应用到同一个元素上，示例代码如下。

<div v-bind:style="[classObj1, classObj2]"></div>

在上述代码中，数组中的每一个元素都是一个对象，例如classObj1和classObj2，对象中包含CSS属性名和属性值。每个对象需要在<script>标签中定义。

演示如何为class属性绑定数组

<template>
  <!-- 使用数组 -->
  <div v-bind:style="[activeClass, borderClass]"></div>
  <!-- 使用三元表达式 -->
  <div v-bind:style="[isActive ? activeClass : '', borderClass]"></div>
  <!-- 数组语法中使用对象语法 -->
  <div v-bind:style="[{ backgroundColor: 'rgb(59, 192, 241)', height: '10px' }, borderClass]"></div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const isActive = ref(true)
const activeClass = reactive({
  height: '10px',
  backgroundColor: 'rgb(59, 192, 241)'
 })
 const borderClass = reactive({
   border: '2px solid rgb(0, 0, 0)'
})
</script>

2. 将style属性值绑定为对象

在Vue中，将style属性值绑定为对象时，该对象中的属性名表示CSS属性名，属性值为CSS属性值。以对象语法绑定元素的style属性，示例代码如下。

<template>
  <div v-bind:style="{ color: 'red', 'font-size': '30px' }"></div>
  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
  </div>
</template>
<script setup>
import { ref } from 'vue'
const activeColor = ref('red')
const fontSize = ref(30)
</script>

除了将对象直接定义在模板中，还可以将对象定义在<script>标签中，示例代码如下。

<template>
  <div v-bind:style="styleObject"></div>
</template>
<script setup>
import { reactive } from 'vue';
const styleObject = reactive({
  color: 'red',
  fontSize: '12px'
})
</script>

演示如何为style属性绑定对象

<template>
  <!-- 绑定样式属性值 -->
  <div v-bind:style="{ 'background-color': pink, width: width, height: height + 'px' }">
    <!-- 三元表达式 -->
    <div v-bind:style="{ backgroundColor: isBlue ? blue : 'black', width: '50px', height: '20px' }"></div>
    <!-- 绑定样式对象 -->
    <div v-bind:style="myDiv"></div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const isBlue = ref(false)
const blue = ref('blue')
const pink = ref('pink')
const width = ref('100%')
const height = ref(40)
const myDiv = reactive({
  backgroundColor: 'red',  width: '50px',  height: '20px'
})
</script>

案例：导航项的选中状态