关于修改v-html渲染标签内容的样式修改问题

 有两种方法,

这应该是vue编译的规范吧,未在虚拟dom中渲染的元素无法修改样式;

         解决方案1:在updated生命周期函数中,js动态配置样式,代码如下                  

                               updated() {document.querySelector('.detail img').style.cssText ='width: 100%;'},                              

          解决方案2:单独放在一个style标签里                                                                                                                                                                      <style>

                                               .detail  img{

                                                         width:50px

                                                }

                                 </style>

           解决方案3:不推荐使用  去掉style中的scoped   因为子组件会继承父组件的样式,但会影响其它组件的布             局,一般都是先写完静态页面,再渲染数据, 全局样式容易崩,心态就炸了。推荐使用方案2

修改样式的时候,检查下元素,找到相对应的类名,设置样式,如果还是修改不了,可以加   !important

设置优先级为最高   



from    小曼很nice


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。