vue3怎么设置样式

在Vue3中设置样式的方法与Vue2基本相同，可以使用类、ID、标签等选择器来选择元素，然后设置对应的样式属性。例如，在组件的template中可以使用以下代码来设置样式：

<template>
  <div class="my-component">
    <h1 :style="{ color: textColor }">{{ title }}</h1>
    <p :class="{ active: isActive }">{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello, Vue3!',
      content: 'This is my first Vue3 component.',
      textColor: 'red',
      isActive: true,
    };
  },
};
</script>

<style>
.my-component {
  background-color: #eee;
  padding: 20px;
}

h1 {
  font-size: 24px;
}

p.active {
  font-weight: bold;
  color: blue;
}
</style>

在上面的代码中，我们使用了类选择器`.my-component`和标签选择器`h1`来设置样式。同时，我们还使用了动态绑定语法`:style`和`:class`来动态设置样式。在Vue3中，动态绑定语法可以使用`v-bind`或`:`来简写。