vue添加css
时间: 2023-08-03 17:20:21 浏览: 50
Vue.js 框架是一个数据驱动的前端框架,它的样式可以通过普通的 CSS 样式表来实现。你可以将 CSS 样式表直接引入到 Vue 组件中,或者使用 Vue 提供的 scoped 特性来限制 CSS 样式的作用域。
1. 直接引入 CSS 样式表
在 Vue 组件中,你可以像在普通的 HTML 页面中一样引入 CSS 样式表。你可以使用`<link>`标签或`<style>`标签来引入样式表,例如:
```html
<template>
<div class="my-component">
<p>这是一个 Vue 组件</p>
</div>
</template>
<style>
.my-component {
font-size: 16px;
color: #333;
}
</style>
```
上面的代码中,我们在 Vue 组件的`<style>`标签中定义了一个`.my-component`样式类,用于设置组件中的文本字体和颜色。
2. 使用 scoped 特性
如果你希望限制 CSS 样式的作用域,可以使用 Vue 提供的 scoped 特性。当你在样式表中添加 scoped 特性时,Vue 会将该样式表限制在当前组件的作用域内。例如:
```html
<template>
<div class="my-component">
<p>这是一个 Vue 组件</p>
</div>
</template>
<style scoped>
.my-component {
font-size: 16px;
color: #333;
}
</style>
```
上面的代码中,我们在样式表中添加了`scoped`特性,这意味着`.my-component`样式类只会应用于当前组件中的元素,而不会影响其他组件或全局样式。