Vue如何设置样式

Vue中有几种方式可以设置样式：

1. 在组件的 style 标签内写入 CSS 代码，这种方式的样式只会应用到当前组件：

<template>
  <div>
    <!-- 组件的模板代码 -->
  </div>
</template>

<style>
/* CSS 代码 */
</style>

<script>
// 组件的 JavaScript 代码
</script>

2. 使用 <style> 标签引入外部 CSS 文件，这种方式可以让多个组件共享同一份 CSS 代码：

<style src="./path/to/style.css"></style>

3. 在组件的 template 标签内使用 style 属性，这种方式可以在渲染组件时动态的应用样式：

<template>
  <div style="color: red;">
    <!-- 组件的模板代码 -->
  </div>
</template>

<script>
// 组件的 JavaScript 代码
</script>

4. 在组件的 script 标签内使用 JavaScript 代码动态的设置样式，例如使用 element.style.color = 'red' 将元素的字体颜色设置为红色。