VUE 之 v-html 后样式不生效的问题

最新推荐文章于 2024-08-08 15:59:06 发布
最新推荐文章于 2024-08-08 15:59:06 发布
阅读量6.9k 收藏
点赞数 1
分类专栏： VUE css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ws19900201/article/details/101783403
版权

代码：

<div v-html="newsinfo.post_content"></div>

后台数据中是一段html。。所以用 v-html 来展示；但是样式不生效了 ；

解决方法：去掉 样式中 scoped 就OK了。。

<style lang=
最低0.47元/天 解锁文章
幽幽靖
关注
专栏目录
vue中v-cloak解决刷新或者加载出现闪烁问题（显示变量）
08-27
"Vue 中 v-cloak 解决刷新或者加载出现闪烁问题（显示变量）" 在 Vue 中，使用 v-cloak 指令可以解决刷新或者加载出现闪烁问题（显示变量）。当我们使用 Vue 绑定数据时，在渲染页面时会出现变量闪烁，例如 `...
解决vue3中设置的v-html的代码样式不生效的问题
时清云的博客
11-17 2651
在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被Vue 的模板编译器处理。如果你希望针对v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局。最近在做一个需求，遇到这样一个问题，接口返回的一段。这句话非常清楚地表明了没有生效的原因。内容的样式没有生效，这是什么情况？那我们怎么设置让它生效呢？渲染到页面的时候，发现在。
v-html 样式失效
qq_43654065的博客
01-29 947
vue3使用:deep(){}，穿透标签，v-html中的样式就可以生效了。标签使用了v-html，但是渲染的HTML标签中的样式并没有生效。
vue动态更改样式不能即时生效的问题
最新发布
m0_46893049的博客
08-08 313
绑定的动态样式方法中，若要使用DOM方法获取页面元素的宽高等样式属性，就必须加定时器或者使用。，而是写一个方法，在需要的地方去主动调用（需要加定时器），下面给出示例。，但若如此，样式就不生效了。解决方案：不再绑定动态样式。
v-html设置样式不生效
FantasyBreaker的博客
02-02 2614
1.由于scoped影响，导致v-html设置样式不生效；可以去掉scoped，不推荐，导致样式混乱；也可以在全局style样式中设置样式，当前组件仍使用scoped样式。 2.使用深度>>> 或/deep/ 样式选择器，进行scoped穿透。 3.外嵌一层，在外层上设置某些样式。 ...
vue中通过v-html添加内容添加样式无效
xiaomajia029的博客
08-12 2335
问题描述： 在使用富文本编辑图文详情的时候，通常会使用v-html引入所编辑的内容，然而，详情显示的样式有时不是我们希望的（尤其是图片，大图会出现溢出内容区域的问题），在<style scope> 中添加样式却并不生效。 原因分析： 以下摘自vue官方文档： 在单文件组件里，scoped的样式不会应用在v-html内部，因为那部分 HTML 没有被 Vue 的模板编译器...
关于Vue 中v-html 的样式失效的问题
半夏_2021的博客
06-24 843
关于Vue 中v-html 的样式失效的问题
vue中v-html设置样式无效的问题解决方案
CaseyWei
08-21 5150
场景：例如使用v-html加载一些后台返回的一段富文本HTML代码，富文本里包含图片，在手机上图片宽度可能会溢出或者需要设置一些样式。 解决方法：使用vue的深度作用选择器 >>> 即可。 <div v-html="htmlContent" class="rich"></div> <style scope> .rich>...
vue通过v-html指令渲染的富文本无法修改样式的解决方案
10-15
然而，`v-html`动态插入的HTML并不属于Vue编译的一部分，因此它们不受`scoped`样式的影响。Vue可能在构建虚拟DOM时无法识别和绑定这些动态生成的元素，导致样式无法应用。 3. **解决方案**： - **解决方案1（推荐...
用v-html解决Vue.js渲染中html标签不被解析的问题
01-19
最近在工作中遇到一个问题，在网页中后台传来的json数据中包含html标签，将该json数据绑定到Vue.js中对象中，对该对象进行for循环，发现数据中的html标签不能被解析，而是当作字符显示出来。 问题如下所示： 解决...
vue 出现data-v-xxx的原因及解决
10-15
Vue会自动将 `.list-container:hover` 的CSS选择器转换为 `.list-container[data-v-xxx]:hover`，这里的 `data-v-xxx` 是一个唯一标识，确保这个样式只对当前组件生效。这样，即使其他组件也有相同类名的元素，它们...
修改Vue中的 v-html 内的元素无效问题
船停在港湾是很安全的,但那不是造船的目的.
09-05 516
其原因就是在 style 样式中没有去处scoped 因为 v-html 会把内容当成子组件,而scoped 会在本身的组件中起作用
解决vue中v-html元素中标签样式失效问题
yuanwen52的博客
12-30 2025
加上scoped会导致 v-html 下绑定的标签样式不生效 解决方案： 定义两个style标签，一个加上scoped属性，一个不加上scoped属性 <style lang="less" scoped> .viewDetail { .tip { margin-bottom: 0.47rem; background: #e5f1fe; height: 0.8rem; font-size: 0.28rem; font-weight: 400;
vue-quill-editor踩坑记录--富文本内容回显样式不对
weixin_43794749的博客
03-10 4861
使用vue-quill-editor写的富文本，内容在H5使用v-html显示时，样式跟在富文本写的时候样式不一样，字体大小显示不出来。 原因：有些类名，在v-html页面是没有找到的。 解决: 全局或者局部引入vue-quill-editor的样式文件 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' <div v-html="co.
vue项目中，使用v-html后样式没法改变
qq_34530330的博客
03-02 915
在vue单页模式中为了防止页面之间的样式互相影响，会加上scoped,之后就互相不受影响了，但是在使用 v-html时候样式没法改变，去掉scoped之后就可以了， ...
vue修改html片段的样式无效,vue 组件中添加样式不生效的解决方法
weixin_35906775的博客
06-09 1030
如何产生在开发项目中遇到在组件中添加样式不生效的情况。具体场景如下//// vue 组件//我用js在上面div标签中插入一个text goes hereexport default {...mounted(){$('.box').html('text goes here')},...}//style ， vue组件scoped样式都会在选择器的最后加上data-v-***属性//样式添加了sco...
vue中使用v-html，css不生效
GTbond的博客
04-07 2941
1.vue中使用v-html，css不生效
关于Vue 中v-html 失效的原因
06-28 4622
众所周知，Vue.js现在越来越火，在实际中遇到： 已知： user.data=&lt;p&gt;请在输入框内贴入你需要转换的HTML代码&lt;/p&gt; &lt;br&gt;&lt;p&gt;HTML转...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值