首页 > Web开发 > 详细

vue 在使用v-html绑定的时候,里面的元素不会继承外部的css,解决方案

时间:2017-11-18 10:49:20      阅读:36      评论:0      收藏:0      [点我收藏+]

标签:ant   style   important   实现   理解   16px   css样式   import   lis   

问题

想用vue绑定父文本生成的HTML内容,但是发现CSS样式根本不生效,选择器没起作用

代码:

<div class="announcedetailImg" v-html="detailList.content"></div>

设置样式:

<style lang="less" scoped>
.announcedetailImg{
    width:100%;
}
.announcedetailImg img{
    width:100% !important;
    display:block;
}
.announcedetailImg p{
    color:#333;
    font-size:16px;
}
    
</style>

这样之后,发现样式不起作用

解决方案:

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

解决的话把scoped属性去掉就行了

vue 在使用v-html绑定的时候,里面的元素不会继承外部的css,解决方案

标签:ant   style   important   实现   理解   16px   css样式   import   lis   

原文:http://www.cnblogs.com/rachelch/p/7855962.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号