Vue 中设置样式的方法

在 Vue.js 中，可以使用多种方法为组件和元素添加样式。

1. 内联样式

内联样式直接写入组件模板，是最简单的样式设置方法。

<code class="html"><template><div style="color: red; font-size: 20px;">Hello World</div>
</template></code>

2. 局部样式（scoped）

scoped 样式仅适用于当前组件及其内部元素，可以防止样式污染。

<code class="html"><template><style scoped>
    .my-class {
      color: blue;
      font-weight: bold;
    }
  </style>
<div class="my-class">Hello World</div>
</template></code>

3. Sass/SCSS

Sass 和 SCSS 是 CSS 预处理器，可以在 Vue.js 中使用来编写更强大的样式。

<code class="s&lt;a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css"&gt;// main.scss
.my-component {
  color: #f00;
  font-size: 1.2rem;
}</code>

<code class="html"><template><style lang="scss">
    @import "./main.scss";
  </style>
<div class="my-component">Hello World</div>
</template></code>

4. CSS 模块

CSS 模块通过生成唯一的类名来防止样式冲突，通常与 webpack 一起使用。

<code class="javascript">// App.<a style="color:#f60; text-decoration:underline;" href="/zt/15721.html" target="_blank">vue</a>
import styles from './App.module.css';

export default {
  render() {
    return (
      <div classname="{styles.myClass}">Hello World</div>
    );
  }
}</code>

<code class="css">// App.module.css
.myClass {
  color: green;
  text-align: center;
}</code>