vue中v-html渲染出来的元素添加样式

 <span v-html="ExhibitionData.content" id="Content"></span></li>

不能直接在 <style></style> 中修改css样式这应该是vue中虚拟dom渲染的元素无法修改样式；

方法1：在updated生命周期函数中，js动态配置样式（这里引入了jQ，可以用原生js更改样式）

updated(){$('#Content').find('img').css('width', '100%')},

方法2：去掉style标签中的scoped属性！（注意类名一样会污染全局样式，用时慎重）

scoped属性导致css仅对当前组件生效（用css3的属性选择器+生成的随机属性实现的），而html绑定渲染出的内容可以理解为是子组件的内容，子组件不会被加上对应的属性，所以不会应用css.

方法3：写样式的时候添加>>>

<style scoped>
#Content >>>  img{width: 100%;
}
</style>

修改后：

vue中v-html渲染出来的元素添加样式相关推荐

vue中给v-for渲染的元素动态添加移除类名
vue中给v-for渲染的元素动态添加移除类名今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以直接 ...
vue选中点击的元素_vue中v-for循环选中点击的元素并对该元素添加样式操作
相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变:但是往往所有v-for循环出的元素都会变化.如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变, ...
vue中给v-for循环出来的元素分别加样式
vue中给v-for循环出来的元素分别加样式 1.绑动态样式` <div :class="box" v-for="(item, index) in datas&qu ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
jq创建元素并设置css样式,JQuery为元素添加样式的实现方法
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...
Vue中v-html无法渲染
vue 中v-html将原始html渲染为带样式的文本最近在使用v-html去渲染富文本的时候发现,怎么都渲染不出. 后发现后端为了安全性考虑,将<".">" ...
antv g2plot可视化图表在vue中的使用之四：为图表添加事件
文章目录图表事件event g2plot升级仪表盘Gauge添加点击事件仪表盘类型仪表盘组成仪表盘事件其他参考资料图表事件event 我们经常会遇到为图表添加事件的需求,无论是对整个图 ...
vue中百度地图使用及自定义点聚合样式
百度地图使用及点聚合功能由于后台固定了百度地图,百度地图和高德地图经纬度转换有次数限制,不能满足项目的正常运行,所以切换了百度地图,下面对使用中遇到的问题进行记录: 安装及使用百度地图: npm i ...
css为元素添加样式,JQuery如何为元素添加样式
为定义好的css样式可以调用元素的css方法添加样式复制代码代码示例: $("span").css("css属性名","属性值") 如 ...

vue中v-html渲染出来的元素添加样式

vue中v-html渲染出来的元素添加样式相关推荐

最新文章

热门文章