这篇文章主要介绍了vue 组件中添加样式不生效的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
如何产生
在开发项目中遇到在组件中添加样式不生效的情况。具体场景如下
//// vue 组件 <template> <div data-v-33f8ed40></div> <template> //我用js在上面div标签中插入一个<p>text goes here</p> <script> export default { ... mounted(){ $('.box').html('<p>text goes here</p>') }, ... } </script> //style ， vue组件scoped样式都会在选择器的最后加上data-v-***属性 <style scoped> //样式添加了scoped .box{ color:red; } .text{ color:blue; } </style>
浏览器渲染的html 和 style 如下：
//html <div data-v-33f8ed40> <p>text goes here</p> </div> //style .box[data-v-33f8ed40]{ color:red; } .text[data-v-33f8ed40]{ //样式不生效，因为p标签里没有属性data-v-33f8ed40 color:blue; }
如何解决
很简单将去掉 style 的 scoped 属性。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: