当前位置: 首页 > news >正文

v-html命令渲染的内容,使用scoped属性的情况下,样式不起作用

v-html命令渲染的内容,使用scoped属性的情况下,样式不起作用

如:
CSS:

<style scoped>
.question_title_text img{ display: block; height: 200px; margin: 10px auto 0 auto;}
</style>

HTML:

<div class="question_title_text"><span v-html="questionTitle"></span>
</div>

JS:
questionTitle : "题目中有图片<img src='question/q_1.png' >"

不去掉scoped属性的解决方法:
1. 通过 >>> 可以使得在使用scoped属性的情况下,穿透scoped
如:

<style scoped>
.question_title_text >>> img{ display: block; height: 200px; margin: 10px auto 0 auto;}
</style>

2. >>> 在 sass | less 中不作用,用 /deep/  |  ::v-deep 来代替
如:

<style scoped lang="less">
/deep/ .question_title_text img{ display: block; height: 200px; margin: 10px auto 0 auto;}
</style>
<style scoped lang="scss">
::v-deep .question_title_text img{ display: block; height: 200px; margin: 10px auto 0 auto;}
</style>

注:Vue 3 中 ::v-deep 被废除了,取而代之的是 ::deep

http://www.lryc.cn/news/232492.html

相关文章:

  • 浅谈vue2.0和vue3.0的区别
  • git clone报错SSL connect error
  • LeetCode(26)判断子序列【双指针】【简单】
  • 学习c#的第十五天
  • TrafficGPT: Viewing, Processing, and Interacting with Traffic Foundation Models
  • SPASS-参数估计与假设检验
  • 虚拟博物馆和纪念馆全景漫游
  • chrome 浏览器个别字体模糊不清
  • Resolume Arena 7.15.0(VJ音视频软件)
  • Java设计模式
  • 平均分(C++)
  • .NET8.0 AOT 经验分享 FreeSql/FreeRedis/FreeScheduler 均已通过测试
  • Django之模型层
  • 京东数据挖掘(京东运营数据分析):2023年宠物行业数据分析报告
  • 五分钟k8s实战-Istio 网关
  • vue-admin-template
  • Go fsnotify简介
  • 分类预测 | Matlab实现PSO-BiLSTM-Attention粒子群算法优化双向长短期记忆神经网络融合注意力机制多特征分类预测
  • 【Python】Pandas(学习笔记)
  • 京联易捷科技与劳埃德私募基金管理有限公司达成合作协议签署
  • Netty Review - 从BIO到NIO的进化推演
  • ​软考-高级-系统架构设计师教程(清华第2版)【第9章 软件可靠性基础知识(P320~344)-思维导图】​
  • M系列 Mac安装配置Homebrew
  • WebRTC简介及使用
  • 网工内推 | 国企、上市公司售前,CISP/CISSP认证,最高18K*14薪
  • 阿里云99元VS腾讯云88元,双11云服务器价格战,谁胜谁负?
  • 1.jvm基本知识
  • 前端---掌握WebAPI:DOM
  • 最优化基础(一)
  • 基于JavaWeb+SpringBoot+Vue医疗器械商城微信小程序系统的设计和实现