vue在使用html绑定的时候，里面的元素没有继承外部的CSS

最新推荐文章于 2022-09-05 00:12:39 发布

weixin_30617737

最新推荐文章于 2022-09-05 00:12:39 发布

阅读量143

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/-maomao-/p/7850339.html

版权

使用v-html绑定了从请求数据中html元素，发现css并不会应用上去

那是因为

scoped属性导致css仅对当前组件生效（用css3的属性选择器+生成的随机属性实现的），

而html绑定渲染出的内容可以理解为是子组件的内容，子组件不会被加上对应的属性，所以不会应用css.

解决的话把scoped属性去掉就行了

如果生成的html元素中自带style样式

可以使用!important提升自己写的样式

转载于:https://www.cnblogs.com/-maomao-/p/7850339.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30617737

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

前段HTML/CSS ES6 VUE 面试题总结

m0_64531353的博客

03-01

320

vue相关js相关es6相关css相关面试题

5 Vue＋html css 问题（西安10.9）

harvestUachieve的博客

10-10

1336

数据响应式原理的核心就是采用了数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty()对数据进行拦截，把这些属性全部转换成getter/setter，get（）方法可以读取数据、收集依赖，set（）方法可以改写数据，在数据变动时会对数据进行比较，如果数据发生了变化，会发布消息通知订阅者，触发监听回调，更新视图。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器。的操作，比如改变宽高，隐藏节点等。

参与评论您还未登录，请先登录后发表或查看评论

vue 在使用v-html绑定的时候，里面的元素不会继承外部的css，解决方案

w36680130的博客

01-04

245

vue 在使用v-html绑定的时候，里面的元素不会继承外部的css，解决方案

Vue学习(十六)——子组件样式无法继承

sophiacan110的博客

12-15

1592

在写侧边栏时，将二级菜单作为一个单文件组件抽离出来之后，发现样式完全不同。说明父组件的样式并没有继承给子组件。有三种解决方案：（1）想办法将父组件的样式继承给子组件（2）sub-menu的属性发生了改变，所以可以找到ant-design-vue sub-menu组件的样式，将其复制黏贴到子组件中。但是之前已经在main.js中全局引入了Antd，a-menu-item已经引入了，所以是可以直接用的。现在的问题是a-menu-item已经引入了，但是内部的文字的样式很奇怪。要找到...

v-html 中单页面的css不生效

weixin_42206375的博客

05-06

478

在单页面组件里面,scoped的样式不会应用在v-html内部,因为那部分HTML没有被Vue的模板编译器处理解决方法去掉scoped (不建议使用,会改变布局,导致组件之前的样式冲突) 通过 >>> 深度选择器,在scoped属性的情况下,穿透scoped,修改其他组件的值,但是在vue项目中,使用less,或者sass的时候,>>>可能会失效,…这个看命使用 /deep/ <style lang="scss" scoped> .article .

1.使用v-html加载富文本，css样式不起作用

qq_35491739的博客

01-13

2130

不清楚有没有相似的，这个是写代码的时候遇到的，查了一些资料也都是分开讲/deep/和!important,稍微试了一下一开始没反应，然后添加个背景确认能不能定位到这个元素，也耗了一个小时，总之当作记录吧!

Vue 之解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法

weixin_45092437的博客

09-05

1万+

通过官方文档可以得知两个重点：① 通过v-html生成的页面元素，不会被当做Vue模板进行编译，只会作为普通的html代码被插入，也就是说通过v-html插入的html@click、v-if等，则不会生效，因为他们没有被Vue编译，而浏览器并不会识别这些vue语法，所以这些语法都不生效。② 在.vue文件中如果style标签上增加了scoped属性，那么该标签内的样式就不会对v-html生成的页面元素起作用，还是因为这些元素没有被当做Vue模板进行编译，所以不生效。

前端面试题js，html，css，vue

最新发布

12-28

z-index属性用于控制元素在z轴上的顺序，而层叠上下文则由各种CSS属性（如position）触发。 4. **居中布局**：包括水平居中和垂直居中，有多种实现方式，如text-align、margin: 0 auto、absolute配合transform、...

vue2 vue3 js es6 html css 知识点

weixin_71783532的博客

08-03

1070

生命周期函数又叫钩子函数是到了某一个时间点会自动触发我们讨论的是 vue 实例的钩子函数从 vue 实例创建到销毁的过程中到了一定的时间节点就会触发是 ECMAScript 的第六个版本在 es5 的基础上新增加了一些语法 js 分成三部分 dom（文档对象模型） bom（浏览器对象模型） ECMAScript（js 语法）1.JavaScript（以下简称 js）的数据类型分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；...

面试分析-HTML-CSS-JS-VUE

m0_50125215的博客

09-11

303

-------------基础-------------- 1、H5新特性：拖拽(抓取对象以后可以拖到另一个位置) data-属性语义化标签(header、footer、nav、aside等) 视频音频(video、audio) canvas 本地存储(localStorage、sessionStorage)等 2、C3新特性：边框圆角 box-sizing rgba颜色渐变过渡动画 2D转换 3D转换 flex布局字体图标等 3、三种存储方式对比： localStorage：长期存

vue子组件如何不继承父组件style样式

qq_43512769的博客

05-13

4767

vue子组件如何不继承父组件style样式在引入子组件后，有的子组件的样式会被父组件定义的类所改变，所有我们要解决这个问题。加上scoped 后子组件不会被父组件样式改变 <style lang="scss" scoped> </styke> ...

vue 中控制v-html 中的样式，但不影响全局的小技巧

weixin_33834679的博客

03-03

5698

我们知道在 Vue 中，style可以用两种方式来导入： // method1 @import ('./a.css'); //method2 <style src='./a.css'> 复制代码但是不管哪一种，导进的css文件都是应用于全局的，有时候我们不想要这样的效果。而要使得css只对当前的组件有效，即局部应用。vue中提供了scoped属性，可以很好地解决该问题。当我们有如...

【vue】关于v-html内容中css样式失效解决办法

coralime的博客

03-02

3897

最近在研究富文本编辑器，要求直接从Excel表格粘贴复制到编辑器中，并成功渲染出表格样式在vue中渲染一段纯HTML一般会采用v-html，但是这种方式下所有样式都会失效 <div v-html="this.editorData" class="content-html"></div> <style scoped lang="less"> .content-html{ /* table 样式 */ table { border-

vue中使用v-html，css不生效

GTbond的博客

04-07

2964

1.vue中使用v-html，css不生效

css不继承父级_VUE中CSS样式穿透

weixin_39824898的博客

11-21

3010

VUE中CSS样式穿透1. 问题由来在做两款H5的APP项目，前期采用微信官方推荐的weui组件库。后来因呈现的效果不理想，组件不丰富，最终项目完成后全部升级采用了有赞开发的vant组件库。同时将webpack顺利从3升级到4（项目结构 webpack+vue+vue-store+vue-router+vant+less）。相信好多做TOB的开发朋友都会选择顺手组件库。组件库内置了很多样式，方便了...

关于vue.js里禁用特性继承的理解

s_web_q的博客

05-08

5691

最近在跟着官方文档学习vue.js的文章，当看到禁用继承特性这一点的时候不是很理解，后跟着官方的实例运行了一下，算是弄懂了一些，特此记录，仅供参考！首先假设如今有一个组件<base-input></base-input>,创建改组件式的代码如下：Vue.component("base-input", { inheritAttrs: false, //此处设置禁用继承特性 ...

ant design vue 页面很多css没显示出来_UI库(CSS+HTML)

weixin_42350314的博客

01-18

1492

HTML 是结构化文档, 算是数据结构的一种(变体)吧CSS 就是渲染引擎的怎么运作的配置文件CSS难在哪里？1：浏览器兼容，浏览器兼容一直是前端开发头疼的事情，各种版本型号的浏览器，相互兼容，调试，往往都会让很多人心力憔悴。2：移动端适配，移动端的高速发展，各种屏幕大小的适配，以及不同系统的兼容问题，以及市面上各种眼花缭乱的适配方案，让我们头晕目眩，在加上less，sass，scss的...

vue中element组件样式修改无效