vue 组件样式如何不影响全局
2016-06-30 10:38
736 查看
可以在 “style” 标签中添加 “scoped” 属性。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201909/21/597874d7fbe16350f6d5fc96780f4b49.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201909/21/2a1e47badb31d619c4d7bf813d74c06b.png)
<style scoped> .red { color: #f00; } </style> <template> <div class="container"> <h2 class="red">{{msg}}</h2> </div> </template> <script> export default { data () { return { msg: 'Hello World!' } } } </script>
效果如下:
页面显示
![](https://oscdn.geek-share.com/Uploads/Images/Content/201909/21/597874d7fbe16350f6d5fc96780f4b49.png)
html结构
![](https://oscdn.geek-share.com/Uploads/Images/Content/201909/21/2a1e47badb31d619c4d7bf813d74c06b.png)
css结构
![](https://oscdn.geek-share.com/Uploads/Images/Content/201909/21/6608aaab77a83a5482d0af3051c60c08.png)
相关文章推荐
- 各种设备的CSS3MediaQuery整理及爽歪歪写法
- 运行maven build报错No goals have been specified for this build.
- 优化UITableViewCell高度计算的那些事
- servlet request getHeader("x-forwarded-for") 获取真实IP
- 347. Top K frequent element
- UI坐标系转换
- LeetCode 063 Unique Paths II
- iOS开发问题----UISearchBarController跳转导航栏闪烁问题
- LeetCode 062 Unique Paths
- error MSB4057: The target "PlatformPrepareForBuild" does not exist in the project
- angular2 quickstart
- leetcode-java-96. Unique Binary Search Trees
- LeetCode 060 Permutation Sequence
- 新手错误——两个USB终端是不能直接通信的
- Kendo UI常用示例汇总(十四)
- The JSP specification requires that an attribute name is preceded by whitespace
- Gradle version 2.2 is required错误解决
- Unable to find the requested .Net Framework Data Provider. It may not be installed
- #146 – Use GetValueSource Method to Find the Source of a Dependency Property Value
- 熊先生做原型之:简单、粗暴、有效