Vue中改变v-html渲染出来的样式


在vue2.0中使用v-html渲染时有可能我门会需要微调一下样式,今天在使用v-html时候发现一个问题,渲染出来的在<style></style>中无法直接改变样式。

 
tp.png

当我们使用v-html渲染页面,使用下面这种方式去修改样式并没有效果,

 
tp2.png

我在网上找了好多解决的方法

 

一.
 
微信截图_20190330140624.png

我们可以 给 width:100% !important; 这样就可以改变 它的属性

二.
去掉style标签中的scoped属性
scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css.
但是我使用这种方法也并没有生效
三.
这种方法使我使用的试了下它可以生效
在updated生命周期函数中,js动态配置样式,代码如下:


 
微信截图_20190330140805.png

如果大家在使用前2个方法没有生效时,可以试一下第三中方法。



作者:去看一场黑白电影
链接:https://www.jianshu.com/p/c8758c16fcf4
来源:简书


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM