vue3js修改样式

要在Vue 3中修改样式，可以使用以下几种方式：

1. 使用内联样式：在Vue组件的模板中，可以通过`style`属性来设置内联样式。例如：

<template>
  <div :style="{ color: 'red', fontSize: '20px' }">
    This is a red text with font size of 20px.
  </div>
</template>

2. 使用类名绑定：在Vue组件的模板中，可以通过`class`属性来绑定类名，然后在CSS样式表中定义相应的样式。例如：

<template>
  <div :class="{ 'red-text': isRed, 'big-text': isBig }">
    This is a dynamic text.
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRed: true,
      isBig: false,
    };
  },
};
</script>

<style>
.red-text {
  color: red;
}

.big-text {
  font-size: 20px;
}
</style>

3. 使用全局样式：可以在Vue应用的根组件中引入全局样式，并将其应用于整个应用。例如：

<template>
  <div>This is a text.</div>
</template>

<style src="./styles/global.css"></style>

在`global.css`文件中定义全局样式。

这些是Vue 3中修改样式的几种常用方式，根据具体需求选择合适的方式进行样式修改。