v-html关于css和scss样式问题

最新推荐文章于 2022-12-29 18:38:27 发布
VIP文章 最新推荐文章于 2022-12-29 18:38:27 发布
阅读量567 收藏 1
点赞数
分类专栏： vue css 文章标签： vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjw0021/article/details/113240289
版权

这两天在做一个考试系统项目中在填空题方面遇到关于v-html中写class无法生效的问题

百度之后发现了一个神奇的存在： 样式穿透(嘿嘿 其实我也不知道这个叫法对不对，之前有遇到过js事件穿透 嗯 活到老学到老)

这里简单写一个demo

来看下图效果 没有生效

百度了一大堆有说把scoped去掉或者写两个style,嗯效果是可以的 就是感觉有点low，另外也可以将样式写为行内样式，也是可行的，但是还是想找个更好的方法

于是乎发现css中可用>>>,scss中存在/deep/和::v-deep

1、scss中使用/deep/

呦西  生效了

最低0.47元/天 解锁文章
土匪丁的窝子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
project0:CS50Wx- CV模板-HTML，CSS，SASS，PostgresSQL
05-07
styles.scss所有页面模板的常规样式。scssCV模板的样式 项目0要求 使用Python和JavaScript进行网络编程 您的网站必须至少包含[v]个四个不同的.html页面，并且[v]应该可以通过遵循一个或多个超链接从您网站上的任何...
vue：v-html怎么使用import进来的方法
Yal_insist的博客
06-28 812
v-html怎么使用import进来的方法
vue.js占位html标签,详解三种方式解决vue中v-html元素中标签样式
weixin_39915204的博客
05-31 1416
Vue为v-html中标签添加CSS样式{{news.title}}{{news.datetime}}返回列表当我们使用v-html渲染页面，使用下面这种方式去修改样式并没有效果，.con{p {font-size: 14px;line-height: 28px;text-align: left;color: rgb(238, 238, 238);color: #585858;text-inden...
关于 v-html 解析富文本内容 样式问题
m0_57874230的博客
12-29 2028
前端解析富文本样式
解决v-html指令潜在的xss攻击
lingxiaoxi_ling的博客
04-29 1万+
我们首先来看一个例子 运行之后由于src地址对应的资源找不到，会触发img标签的error事件，最终alert弹框。这便是一个最简单的xss攻击。 html指令的运行原理 v-html指令源码 // /vue/src/platforms/web/compiler/directives/html.js export default function html (el: ASTElement, di...
Vue——解决v-html无法渲染内部css样式
qq_40790989的博客
08-01 2874
先看官文解释，为什么无法被渲染。 由此可见原因。 看了网站上的很多说法，有的建议<style scoped>中删除scoped，那么根据官方文档的说法，这里的模板样式的css文件将上升为全局的css样式。 另外一种方法，可以在模板的生命周期的update中挂载对应的css样式。 ...
gatsby-starter-henlo:适用于Gatsby v3的简约启动器，已针对SEO和性能进行了优化。 采用Tailwind和SCSS样式
04-30
使用SCSS和purge-css-plugin内置在Tailwind中 内置站点地图 预先渲染HTML和JS文件的自动块加载功能使加载时间飞速增长 使用gatsby-plugin-image Netlify部署配置 Netlify功能支持，请参阅lambda文件夹 支持异步...
bootstrap-themes：Bootstrap的主题
01-29
{theme_name} .scss-一个主题文件，可导入变量，默认的Bootstrap主题和自定义CSS规则。 不要更改此文件的导入顺序。 客制化 执行以下操作来自定义主题源文件并编译生成的主题： 克隆或下载此存储库。 打开dist / ...
bootstrap4-api-plugin:提供Bootstrap 4的Jenkins插件
03-22
它是一个用于使用HTML，CSS和JS开发的开源工具包。开发人员可以使用他们的Sass变量和mixins，响应式网格系统，大量的预构建组件以及基于jQuery构建的强大插件，快速构建其思想原型或构建整个应用程序。 该插件捆绑了...
theme:该项目集中了组织的博客样式
05-24
主题先决条件节点> = v12.18.2 NPM> = v6.14.5 纱> = v1.22.0或npm install -g纱.gitconfig Git的合并提交消息 [alias] mergelogmsg = "!f() { var=$(git symbolic-ref --short HEAD) && printf 'Merge branch %s ...
v-html添加的内容，css样式不起作用
qq_28500793的博客
03-11 4458
v-html添加的内容，css样式不起作用 在用vue给标签内添加需要浏览器解析的文本内容时候，我们通常要用到v-html标签，但是用了这个标签后，我们无法对其内部标签的样式进行设置，那是因为，v-html相当于引入外部组件内容。 现在我们用的sylte都会包括scoped标签，这个是私有属性的标签，所以我们要新建一个样式联，将scoped标签去掉，将样式卸载这里面 就可以了。如下： &lt;st...
vue中使用v-html，css不生效
GTbond的博客
04-07 2726
1.vue中使用v-html，css不生效
sass、vue（v-model、v-text、v-html、v-for、v-if、v-show、v-on、修饰符）
m0_66970189的博客
06-22 372
sass变量有字符串、数字，布尔值 格式 使用方法 作用域 sass变量同样也分为全局变量、局部变量局部变量转全局变量 sass文件中可以引入其他的sass文件 在案例中我们可以看到hover和nth选择器的用法，它不需要像css中那样，总是要写一次类名，只要在想要控制的元素的花括号中写上hover或者hover或者hover或者nth-of-type()就可以了sass混入是指通过表达式封装一套样式，需要使用时引入就可以了 混入@mixin name(a,b){} 参数也可以不写 引入@include
Vue中v-html解析代码如何修改样式？
qq_43576662的博客
06-16 854
Vue中v-html解析代码如何修改样式？ detail变量中存放的是tinymic富文本中保存的标签内容 <div class='style' v-html='detail'></div> 如果div中的图片本身分辨率很高，展示出来则会出现横向滚动条，图片的大小并不能随着父元素的宽度自适应展示 如果直接设置.style img { width : 80% };,发现并不能生效，并且存在 此时可以加上 >>> 来修改标签内所有图片的样式 .style { wi
v-html解析的标签怎么改样式
Yugoup的博客
07-23 658
代码备忘录 scoped要去掉，否则类样式不会生效 scoped属性是私有属性，只对当前组件生效，而v-html绑定渲染出的内容可以理解为是子组件的内容 <div v-html="stem"></div> <script> export default { data () { return { stem:'<div class="...
v-html 解析并插入 html 标签
热门推荐
weixin_41796631的博客
09-21 7万+
1. 双大括号会将数据解释为普通文本，而非 HTML 代码。 &lt;div id="app"&gt; &lt;p id="a"&gt;Using mustaches: {{ rawHtml }}&lt;/p&gt; &lt;p &gt;Using v-html directive: &lt;/p&gt; &lt;/div&gt; &lt;body&a
怎么把SCSS正确引入到html中
qq_41571838的博客
08-13 3万+
首先，不要想得太复杂了，但是必须知道CSS是怎么引入到HTML文档里的，有了这个技术常识就很简单了。     第一步：得到css. 和我猜测的一样，用SCSS和LESS是一样的引入方式，首先写好SCSS或LESS的页面保存在文件夹中，此时打开刚才保存的文件夹会发现后缀名为scss,或less的文件会自动生成一个css后缀名的文件，对的就这样就得到了你要的css. 第二部：在HTML网页中引入...
如何在.html中使用scss
io_123io_123的博客
11-11 5515
如何在.html中使用scss
解决scss文件嵌套样式无效
qq_34661750的博客
08-09 3869
页面引用 1.安装： npm install sass -D 2.新建style.scss文件 page{ color: #ffffff; .page--header{ height:55px; } } 3.页面引用 <style lang="scss" scoped> @import url("style.scss"); </style> 出现问题：嵌套page–header样式无效！！！ 解决方法 改写页面引用方法： <style lang="sc
vue3 css v-bind
最新发布
10-20
在CSS中，v-bind()可以用于动态地绑定CSS属性，使得CSS样式可以根据组件的状态或属性进行动态变化。在Vue3中，v-bind()可以直接在CSS中使用，也可以在SCSS中使用。在CSS中，v-bind()主要完成的任务是将v-bind()中的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值