首页 前端知识 解决vue3中设置的v-html的代码样式不生效的问题

解决vue3中设置的v-html的代码样式不生效的问题

2024-06-04 10:06:27 前端知识 前端哥 184 736 我要收藏

最近在做一个需求,遇到这样一个问题,接口返回的一段html字符串,在list.vue这个组件中使用v-html渲染到页面的时候,发现在list.vue中设置的对于v-html内容的样式没有生效,这是什么情况?

经过查询发现:

在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被Vue 的模板编译器处理。如果你希望针对v-html 的内容设置带作用域的 CSS,你可以替换为 CSS Modules 或用一个额外的全局

在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被Vue 的模板编译器处理
这句话非常清楚地表明了没有生效的原因。
那我们怎么设置让它生效呢?
直接使用:deep()
对于针对v-html的样式的,我们用:deep()处理一下

代码如下:

:deep(.all-tables) {
        table {
            background-color: #fff;
            td {
                font-size: 12px;
                color: #666;
            }
        }
 }
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10766.html
评论
发布的文章

js-jquery页面跳转集合

2024-06-08 22:06:13

echarts柱状图数据过多

2024-06-08 22:06:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!