在vue2.0中使用v-html渲染时有可能我门会需要微调一下样式,今天在使用v-html时候发现一个问题，渲染出来的在<style></style>中无法直接改变样式。
tp.png
当我们使用v-html渲染页面，使用下面这种方式去修改样式并没有效果，
tp2.png
我在网上找了好多解决的方法
微信截图_20190330140624.png
二.
去掉style标签中的scoped属性
scoped属性导致css仅对当前组件生效（用css3的属性选择器+生成的随机属性实现的），而html绑定渲染出的内容可以理解为是子组件的内容，子组件不会被加上对应的属性，所以不会应用css.
但是我使用这种方法也并没有生效
三.
这种方法使我使用的试了下它可以生效
在updated生命周期函数中，js动态配置样式，代码如下：
微信截图_20190330140805.png
如果大家在使用前2个方法没有生效时,可以试一下第三中方法。
在vue2.0中使用v-html渲染时有可能我门会需要微调一下样式,今天在使用v-html时候发现一个问题，渲染出...
在最近的vue项目中遇到的问题：v-html渲染的富文本，无法在样式表中修改样式； 这应该是vue编译的规范吧，未...
关于v-html 在vue使用中，指令v-html渲染页面经常用到，类似于jQuery的$('x').html...
基本使用 React基本使用 直接渲染 html，相当于 vue 中的 v-html React 事件 ...
Vue渲染到html元素的数据时使用v-html输出解析 下面json的数据 在vue中输出label或title...
需求：vue 中渲染后台返回的HTML代码 实现： 使用 v-html 赋值就可以了 说明： 模板中 cs...
在element中定义的样式为全局的，而在vue中的style定义的样式为scoped，vue在进行渲染的时候，先...
在vue中 vue为我们提供了v-html指令，我们可以通过 来实现回显 在网站上动态渲染任意 HTML 是非常危...
(一）vue常用的指令 1.数据渲染：v-text、v-html、{{}} 2.条件渲染 控制模板隐藏:v-sho...
Vue.js官方文档中，对于插值有如下两种写法： 1.文本 1){{data.head}} 2)) 2.纯HTML...
本文标题：Vue中改变v-html渲染出来的样式
本文链接：https://www.haomeiwen.com/subject/gswjbqtx.html
网友评论