vue通过v-html指令渲染的富文本无法修改样式的解决方案

1.问题描述

在最近的vue项目中遇到的问题：v-html渲染的富文本，无法在样式表中修改样式。

代码如下，div.article-context里面的图片修改成自适应，但是没有任何效果。

<div class="article-context" v-html="post.content"></div>

<style scoped>
.article-context img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
</style>

2.分析原因

这是为什么呢？原因很简单：如果图片（img标签）在template中先写出来，那么在<style>标签中是可以修改其样式的。
我猜，这应该是vue编译的规范吧，未在虚拟dom中渲染的元素无法修改样式。

3.解决方案

解决方案1（推荐）：在updated生命周期函数中，js动态设置样式，代码如下：

<script>
import $ from 'jquery'

export default {
updated() {
  $('.article-context').find('img').css({
    "width": "auto",
    "height": "auto",
    'max-width': '100%',
    'max-height': '100%'
  });
}
</script>

解决方案2（不推荐）：去掉style标签中的scoped属性；至于原因？没有仔细研究，我在使用过程出现富文本编辑器无法初始化的问题。

<style>
.article-context img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
</style>

到此这篇关于vue通过v-html指令渲染的富文本无法修改样式的解决方案的文章就介绍到这了,更多相关vue v-html富文本无法修改内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 在vue中利用v-html按分号将文本换行的例子

    最近在开发的时候遇到这样一个需求,需要将一段文本按照分号(有中文分号和英文分号)进行换行操作. 如下: 换行前:雷军,2457.66万,自然人股东;洪锋,169.51万,自然人股东;黎万强,10.33万,自然人股东; 换行后: 雷军,2457.66万,自然人股东; 洪锋,169.51万,自然人股东; 黎万强,10.33万,自然人股东; 显示的html: <p class="bgnr-txt" v-html="change(content)"> js: m

  • vue实现在v-html的html字符串中绑定事件

    需求: 需要在v-html的html字符串的button中绑定点击事件,需要点击后做一些操作,必须渲染成html,但是渲染后的html里面写绑定事件的代码没有经过vue编译,所以事件无效. <div class="code-review"> <div v-html="html" v-highlight @click="addComment($event)"></div> </div> compute

  • vue指令v-html使用过滤器filters功能实例

    问题 2.0 filters only work in mustache tags and v-bind. Vue2.0 不再支持在 v-html 中使用过滤器,比如在 1.0 中是这样使用的: {{{ option.title | highlight }}} 然而,现在不能使用了,Vue2.0 的过滤器现在只能应用在 {{ }} 和 v-bind 中. 然而,嫌麻烦,还想使用怎么办? 解决方法 使用全局方法 使用 computed 属性 使用 $options.filters 使用全局方法 p

  • 详解三种方式解决vue中v-html元素中标签样式

    Vue为v-html中标签添加CSS样式 <template> <div class="hello"> <section> <h2 class="title">{{news.title}}</h2> <p class="news-time">{{news.datetime}}</p> <div class="con" v-html=&qu

  • vue 插值 v-once,v-text, v-html详解

    vue 插值 v-once,v-text, v-html详解

    引入Vue.js ,通过script形式,vue官网语法记录 创建vue应用,数据和 DOM 已经被建立了关联,所有东西都是响应式的 1:插值 缺点:让你的网速慢,或者数据加载失败时,会在浏览器中直接渲染插值[js禁用,javascript报错也会导致这个问题] html: <section id="content"> <p id="Mustache">没有v-once, {{msg}}</p> </section>

  • vue中v-text / v-html使用实例代码详解

    废话少说,代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue实例中的数据,事件和方法</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><

  • VUE解决 v-html不能触发点击事件的问题

    背景:后端返前端html格式的数据,前端用v-html解析渲染,如:<a @click="show(1)"></a>,a标签能成功渲染,但其绑定的事件无法触发. 原因:vue没有将其作为vue的模板解析渲染 解决方案:不用v-html而是component模板编译 上干货: <template> <div class="hello"> <h1> 我是父组件 </h1> <div class

  • vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例

    vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例

    本文实例讲述了vue防止花括号{{}}闪烁v-text和v-html.v-cloak用法.分享给大家供大家参考,具体如下: 一.v-text和v-html <span>{{msg}}</span>  -->     v-text {{{msg}}}      -->    v-html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

  • Vue指令之 v-cloak、v-text、v-html实例详解

    v-cloak 当用户频繁刷新页面或网速慢时,页面未完成 Vue.js 的加载时,导致 Vue 来不及渲染,这就会导致在浏览器中直接暴露插值(表达式),Vue由此也给出了解决方法. 在指定标签或整个父容器加入v-cloak指令,通过css选择器选中v-cloak,隐藏元素即可. // html <div v-cloak id="app"> <span>{{ msg }}</span> </div> // css [v-cloak]{ di

  • vue.js使用v-pre与v-html输出HTML操作示例

    vue.js使用v-pre与v-html输出HTML操作示例

    本文实例讲述了vue.js使用v-pre与v-html输出HTML操作.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-

随机推荐