vue3中给div添加样式

在 Vue 3 中，设置 div 标签的样式有以下几种方式：

1. 使用内联样式，在 div 标签中添加 `style` 属性，例如：

<template>
  <div style="color: red; font-size: 16px;">这是一个 div 标签</div>
</template>

2. 使用类样式，在 Vue 组件的样式文件中定义类样式，例如：

<template>
  <div class="red">这是一个 div 标签</div>
</template>

<style>
.red {
  color: red;
  font-size: 16px;
}
</style>

3. 使用动态绑定样式，在 Vue 组件中使用 `:style` 指令动态绑定样式，例如：

<template>
  <div :style="{ color: textColor, 'font-size': fontSize + 'px' }">这是一个 div 标签</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    }
  }
}
</script>

在上面的例子中，我们使用了 `:style` 指令动态绑定 div 标签的样式，`:style="{ color: textColor, 'font-size': fontSize + 'px' }"` 中的 `textColor` 和 `fontSize` 都是 Vue 组件中的数据，当数据改变时，div 标签的样式也会随之改变。

4. 使用 `class` 和 `:class` 指令，与动态绑定样式类似，我们可以使用 `class` 和 `:class` 指令来动态绑定 div 标签的类样式，例如：

<template>
  <div :class="{ 'red': isRed }">这是一个 div 标签</div>
</template>

<script>
export default {
  data() {
    return {
      isRed: true
    }
  }
}
</script>

<style>
.red {
  color: red;
  font-size: 16px;
}
</style>

在上面的例子中，我们使用了 `:class="{ 'red': isRed }"` 指令来动态绑定 div 标签的类样式，当 `isRed` 为 true 时，div 标签会添加 `red` 类样式。