vuejs 怎么使用css

前言

CSS（层叠样式表）是用于控制网页的外观和布局的一种样式语言。在Vue.js中使用CSS的方法与在普通的HTML网页中使用CSS类似，都可以通过样式表或内联样式的方式来应用CSS样式。本文将介绍在Vue.js中使用CSS的几种常见方式。

使用样式表文件

在Vue.js中，可以像在普通的HTML网页中一样，将样式规则保存在一个样式表文件中，然后在组件中引入并应用这个样式表。以下是使用样式表文件的步骤：

// 在组件的<template>中引入样式表
<template>
  ...
</template>

// 在组件的<script>中引入样式表
<script>
  import './styles.css';
  ...
</script>

在上述示例中，我们在组件的`<script>`标签中使用`import`语句来引入了一个名为`styles.css`的样式表文件。这样，样式表中的样式规则就会自动应用到当前组件的`<template>`中的元素上。

使用内联样式

除了将样式保存在样式表文件中外，还可以使用Vue.js提供的内联样式的方式来应用CSS样式。以下是使用内联样式的步骤：

<template>
  <div :style="{ color: 'red', fontSize: '16px' }">
    这是一段使用内联样式的文字。
  </div>
</template>

在上述示例中，我们使用了Vue.js提供的`:style`指令来设置元素的内联样式。通过在`:`后面绑定一个JavaScript对象，我们可以指定元素的不同CSS属性及其对应的值。

总结

在Vue.js中使用CSS的方式主要有两种：使用样式表文件和使用内联样式。在大多数情况下，我们可以根据需要选择其中一种方式来应用CSS样式。样式表文件适合用于全局样式或多个组件共享的样式规则，而内联样式适合用于一些特定的、仅在当前组件中使用的样式。