v-html里面添加样式

项目中,使用V-html渲染的页面,要添加样式,改如何做

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

1 updated() {
2     $('.msgHtmlBox').find('p').css('color', 'blue');
3  },

解决方案2:去掉style标签中的scoped属性(我用的这种)

scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css.

解决方案3:写样式的时候添加>>> (这种打包的时候会报错)

1 <style scoped>
2 .msgHtmlBox >>>  p{
3    color: blue;
4 }
5 </style>

 

posted @ 2018-10-17 10:29  zhaobao1830  阅读(1883)  评论(0编辑  收藏  举报