Posted in Javascript onJuly 06, 2018
如何产生
在开发项目中遇到在组件中添加样式不生效的情况。具体场景如下
//// vue 组件 <template> <div class="box" data-v-33f8ed40></div> <template> //我用js在上面div标签中插入一个<p class='text'>text goes here</p> <script> export default { ... mounted(){ $('.box').html('<p class="text">text goes here</p>') }, ... } </script> //style , vue组件scoped样式都会在选择器的最后加上data-v-***属性 <style scoped> //样式添加了scoped .box{ color:red; } .text{ color:blue; } </style>
浏览器渲染的html 和 style 如下:
//html <div class="box" data-v-33f8ed40> <p class='text'>text goes here</p> </div> //style .box[data-v-33f8ed40]{ color:red; } .text[data-v-33f8ed40]{ //样式不生效,因为p标签里没有属性data-v-33f8ed40 color:blue; }
如何解决
很简单将去掉 style 的 scoped 属性。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
vue 组件中添加样式不生效的解决方法
- Author -
小鱼er声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@