Vue 该如何实现这个功能？

Question

页面中有一个div
<div v-html="articleContent"></div>

页面加载的时候首先是ajax请求获取到 Article数据，其content 是富文本html代码，绑定到articleContent数据。

现在有一个需求就是需要将 ，rticle的content中的所有的img标签都设置width=400,这个功能该如何实现？

http请求---》articleContent---》将其中的所有img的width设置为400

Answer 1

vue文件是

  <div id="articleContent" ref="articleContent">
                    <div v-html="article.content"></div>

 </div>

http请求之后变成

  <div id="articleContent" ref="articleContent">
                   <p><img></p>
                   <p><img></p>
</div>

需求：设定articleContent div中的所有img的width为400px。

---

我自己写的方式：

css选择器 #articleContent img{
width:400px

}
这种方式无效。

Answer 2

首先，这种方式是可以的。那么为什么不行呢？肯定是样式优先级的问题，他img标签上带有 style 属性。

那么如何设置样式优先级比行内 style 还高呢？ !important

#articleContent img{  
    width:400px !important;
}

Answer 3

用正则表达式处理article.content,给所有的img标签都加上width="400"的属性

Answer 4

你可能需要样式穿透

#articleContent >>> img

Answer 5

一般vue文件css中会有scoped属性，是针对当前模块生效的，如果是在css中让样式生效，你需要这样做：

#articleContent {
    
    /deep/ img {
        width: 400px;
    }
}

或是用正则去匹配此段富文本里面的img标签，给标签动态加上宽度的行内样式