在vue中怎么写行内样式高_vue组件中如何写内部样式？

在现代化的 Web 开发中，CSS 还远未完美，这一点应该没有什么意外。

现今的项目通常都相当复杂，而 css 样式天生又是全局性的，所以到最后总是极容易地就发生样式冲突——要么是样式相互覆盖，要么就是隐式地级联到了下面那些我们未考虑到的元素。

在减轻 CSS 存在的主要痛点方面，我们普遍采用的解决方案是引入 BEM (Block Element Modifier) 方法学。不过这只能解决我们这个大问题的很小一部分。

我们非常幸运，社区已经开发出了一些解决方案，他们可以帮我们处理这些问题。说不定你已经听说过了 CSS Modules、Styled Components、Glamorous、JSS——这些只是众多流行的工具中的少数几个。如果你对这个话题感兴趣，你可以查看这篇帖文——作者 Indrek Lasn 对 CSS-in-JS 的思想做了非常详尽的讲解。

每个通过 vue-cli 创建的 Vue.js 应用都内置了两个很好的解决方案：Scoped CSS 和 CSS Modules (模块式 CSS)。两种方案各有优缺点，所以下面我们就仔细看下哪种方案在你的案例中更适用。

Scoped 样式

我们只需要在 style 标签上添加一个 scoped 属性即可启用 scoped 样式：

.button {

color: red;

}

这样就会使得我们的样式只被应用到这个组件中的元素上。这是借助 PostCSS 实现的，它会将上面的代码转换成下面这样：

.button[data-v-f61kqi1] {

color: red;

}

就像你