vue.js v-html渲染的dom如何添加css

Question

v-html渲染的html代码中有img，但是没有设置宽高，所有图片都是按照本身大小显示的，页面被图片弄的很难看，希望能给img标签加上固定的宽高等样式

Answer 1

在你要添加的标签前面添加 /deep/(深度作用选择器) 样式名/标签名{样式内容}

https://vue-loader.vuejs.org/...

Answer 2

v-html是属于某个div的吧？
那么img就是div的后代元素吧。
提前定义好样式不行么？

.selector img{
    xxx
}

Answer 3

或者你获取v-html那个绑定的div的ref，然后用获取节点的方式给它里面的img加css

Answer 4

样式标签不能加scoped。否则v-html渲染样式会修改无效

Answer 5

首先，你要定义一个图片的样式类，然后在渲染的时候，通过使用:class给特定的标签绑定上你定义的样式类

Answer 6

template:
<p class="informationContent" v-html="item.informationContent"></p>

sytle:
.informationContent >>> img
height 50px
width 50px

我是这样解决的，不知道能不能帮到人

Answer 7

在v-html节点上写一个class或者id,比如 class="vhtml",然后在style里面设置图片的宽高
.vhtml img{width:100px;height:100px;}

Answer 8

使用深度作用选择器

<style scoped>
.notice-content >>> .img { /* ... */ }
</style>

Sass Scss 之类的预处理器使用

::v-deep .notice-content img  {
  width: 100%;
}