vue用v-html加载渲染,里面的内容样式不生效

栏目: Html · 发布时间: 4年前

内容简介:做一个商品的详情页,需要输出富文本的内容,需要设置里面的图片样式最大宽度100%。可是设置img 100%后没反应,看F12检查元素也没加上去。解决方法有2个:1、scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css.解决的话把scoped属性去掉就行了。

做一个商品的详情页,需要输出富文本的内容,需要设置里面的图片样式最大宽度100%。可是设置img 100%后没反应,看F12检查元素也没加上去。

解决方法有2个:

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

2、另外一种常用的方法利用vue的深度作用选择器。要为v-html渲染出中的标签添加CSS样式,我们需要在写样式的时候添加>>>就可以搞定了,如下:

.desc-detail .desc-view >>> img{
    display: block;
    max-width: 100%;
  }

如果使用方法2,是不能用less或者scss,需要使用css语法,否则会报错


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法帝国

算法帝国

克里斯托弗•斯坦纳 / 李筱莹 / 人民邮电出版社 / 2014-6 / 49.00

人类正在步入与机器共存的科幻世界?看《纽约时报》畅销书作者讲述算法和机器学习技术如何悄然接管人类社会,带我们走进一个算法统治的世界。 今天,算法涉足的领域已经远远超出了其创造者的预期。特别是进入信息时代以后,算法的应用涵盖金融、医疗、法律、体育、娱乐、外交、文化、国家安全等诸多方面,显现出源于人类而又超乎人类的强大威力。本书是《纽约时报》畅销书作者的又一力作,通过一个又一个引人入胜的故事,向......一起来看看 《算法帝国》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器