抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

Vue 开发积累

001：scoped 关键字的作用

在 xx.vue 组件中，我们可能会遇到带 scoped 关键字的样式。比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

上方的scoped表示的是作用域化，样式只对当前子组件生效。

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://alloceee.github.io/2021/08/06/%E5%A4%A7%E5%89%8D%E7%AB%AF/16-%E5%89%8D%E7%AB%AF%E8%BF%9B%E9%98%B6/Vue%E5%BC%80%E5%8F%91%E7%A7%AF%E7%B4%AF/

更新于：2021年7月28日