VUE 爬坑之旅-- 给 v-html 渲染出的内容添加样式

在 vue 中,如果要渲染一段 html 内容,可以使用 v-html 标签,渲染出来的内容会带有原来的页面标签和样式,如果想要修改内容里面的样式要怎么做呢?

有的人会说,这还不简单,直接在 style 里面写相应的样式不就完了吗,实际实践过会发现,根本就不行,如果像原来那样直接写的话是根本不起作用的,而且进入调试模式会发现,在每个 class 里面,vue 都给加上了 data-xxxxx 的东西(这一串多出来的东西应该是 vue 的虚拟 DOM 给加上的),那我们就是要给 v-html 里的内容设置样式该怎么做呢,办法也是有的,直接放代码吧

<div class="content" v-html="agreement.content">div>
 .content >>> span{
        width: 100%;
        ...
    }

可以看到,通过在需要设置样式的元素前面加三个箭头就可以实现这个功能了,代码是很简单,但不知道的话还是会一筹莫展的,在此记录下来,同时也希望可以帮助到碰到同样问题的朋友。

你可能感兴趣的:(Vue,Vue,爬坑之旅,vue,v-html,style)