如果使用了 scoped 样式,建议将样式放到全局,或使用::v-deep。 内联样式始终会应用到v-html的内容中,可以作为一种替代方案。 确保样式类名和v-html中的 HTML 结构匹配。 通过以上方法,可以解决v-html内容样式不生效的问题。
解决方法: 去掉scoped,使用全局样式 <divv-html="srcList"class="chartBox"> <style lang="scss"> .chartBox{overflow: auto; } .chartBoxsvg {width:100%;/* 或者你想要的具体宽度,例如 200px */height: auto;/* 保持纵横比 */} </style> 产生原因:局部样式挂在不上...
加上scoped会导致 v-html 下绑定的标签样式不生效、第三方引用的类库对其修改也不生效,特此总结一下几点,用来解决: Vue为v-html中标签添加CSS样式 1<template>2<div class="hello">3<section>4<h2 class="title">{{news.title}}</h2>5<p class="news-time">{{news.datetime}}</p>6<div class="con...
51CTO博客已为您找到关于vue v html 不生效的相关内容,包含IT学习相关文档代码介绍、相关教程视频课程,以及vue v html 不生效问答内容。更多vue v html 不生效相关解答可以来51CTO博客参与分享和学习,帮助广大IT技术人实现成长和进步。
Vue.js官方文档中,对于插值有如下两种写法: 1.文本 1){{data.head}} 2)) 2.纯HTML 1){{data.head}} 2) 如果data:{ h...
在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被 Vue 的模板编译器处理。 解决方法: 1、去掉<style scoped>中的scoped,(不建议使用,会改变布局,导致组件之间样式冲突) <style> .content img{width:100%;height:auto;margin:.5rem auto;} .content .contentimg{width:100%;...
vue用v-html加载渲染,里面的内容样式不生效 做一个商品的详情页,需要输出富文本的内容,需要设置里面的图片样式最大宽度100%。可是设置img 100%后没反应,看F12检查元素也没加上去。 解决方法有2个: 1、scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以...
display: inline-block; max-width: 100% !important; height: auto !important; /*防止图片变形*/ }</style> 如果富文本解析传来表格,则处理为/* 富文本中表格样式设置 *//* p >>> table { display: flex !important; } */p >>> table tr{border-right:1px solid #e0e0e0!important;border-bottom...
以上是Vue官网的提供的注意事项,本质就是scoped的样式对V-html内部的元素不会生效,该怎么办? 第一种解决方案,照样使用scoped,但是我们可以使用深度选择器(>>>),示例如下: 代码语言:javascript 复制 <style scoped>.a>>>.b{/* ... */}</style> ...