vue 中创建的dom样式失效

最新推荐文章于 2022-11-02 09:38:36 发布
最新推荐文章于 2022-11-02 09:38:36 发布
阅读量524 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tao__f/article/details/114231454
版权

原因:less,sass,scss 设置了scoped
关闭scoped即可解决

LT_ya
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue动态生成dom并且自动绑定事件
01-19
用jquery的时候你会发现，页面渲染后动态生成的dom，在生成之前的代码是没办法取到相应对象的，必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。 html: <input type=text v-model=item.val style=width:40px>
关于vue的动态添加dom节点及样式不生效问题的解决办法
最新发布
weixin_40243502的博客
11-07 2041
属性，那么样式只会应用到当前组件的作用域内，而不会影响其他组件或全局样式。时，新添加的HTML内容中的类名无法生效，因为样式作用域被限制在组件内部。在Vue中，如果你的样式标签中包含。指令将HTML内容渲染到元素中。2.类名不生效问题解决。
解决vue 中使用v-html或者jquery 动态添加dom元素，样式不生效
会飞的咕咕鱼的博客
05-12 4028
原因： 新添加的dom，在实际意义上是一个子组件，vue中当我们给style设置了 scoped,该样式就只针对当前组件生效，样式不会渗透到子组件。 解决办法： 1. 把样式写在公共全局css中。 2.使用深度选择器 >>> 或 /deep/。注意：>>>只在css中生效，Less\Sass中不生效。语法： css : .parent >>> .child{ ...
vue 中 通过js插入的dom 无法生效css
weixin_43815091的博客
04-06 1748
vue 中 通过js插入的dom 无法生效css 问题描述 通过js向div中动态添加dom后，事先写好的css样式对新增的dom不生效 原因 通过测试，这是因为vue文件中的style标签添加了scoped的原因，而scoped的作用是为了保证这些css样式只会对当前vue文件(组件)生效，但是由于其他vue文件(组件)中也有可能会出现相同的class名相同的css样式，于是vue就采用了添加随机后缀的方式防止class名重复的样式出现样式覆盖的情况。 解决办法 把style标签的scoped干掉即
Vue 动态修改dom样式
qq_44884300的博客
04-08 6701
Vue 动态修改dom样式
vue 组件中添加样式不生效的解决方法
08-27
在Vue组件中，使用`<style scoped>`可以确保组件内的样式只对当前组件生效，防止样式污染全局。但这种情况下，Vue会自动为所有内部元素添加一个唯一的`data-v-***`属性，使得样式能够与元素匹配。例如： ```html ...
浅谈关于.vue文件中style的scoped属性
08-29
1. 添加scoped属性后，样式不起作用的原因是，css被构建成`.user[data-v-53795c54]`，但是doc节点依然是普通的`<div class="user"></div>`,导致样式不能作用在dom上而失效。 2. 使用scoped属性时，需要将scoped关闭...
关于vue 结合原生js 解决echarts resize问题
11-20
在Vue项目中，ECharts图表在页面布局发生变化时，如左侧菜单栏的收缩与展开，可能需要自动调整其大小以适应新的容器尺寸。这通常被称为`resize`问题。本问题中提到的解决方案是通过结合Vue和原生JavaScript来实现...
解决iframe中fixed失效的问题
05-31
- 使用Web Components（如Shadow DOM）可以创建一个封装良好的组件，其中包含 `fixed` 元素，以避免 `iframe` 的影响。 在提供的压缩包文件 "iframe中fixed失效问题" 中，可能包含了具体的代码示例或演示页面，你...
解决vue的过渡动画无法正常实现问题
10-16
在Vue中，过渡动画是通过`<transition>`组件来实现的，它允许我们在DOM元素的插入、更新或移除时添加过渡效果。这篇文章将深入探讨如何解决Vue过渡动画无法正常工作的问题。 首先，我们要理解Vue的过渡机制。Vue...
vite配置scss无效问题
前端很忙
10-09 6851
如何生成vite的vue项目，网上教程已经有很多，在此就不多说了，在此聊一聊在刚接触vite时，配置scss所遇到的问题。 首先执行初始化项目命令，并安装依赖，运行项目： npm init @vitejs/app vite-test cd vite-test npm install npm run dev 写入样式内容： body { background-color: pink; color: orange; } 安装sass npm install sass -D
【vue】Vue中使用原生js创建元素样式不生效解决办法
michiko98的博客
11-02 1437
vue js 动态创建对象 样式不生效
Vue中使用原生js创建元素样式不生效解决办法
qq_45118905的博客
09-13 2847
【代码】Vue中使用原生js创建元素样式不生效解决办法。
Vue删除一个DOM元素后再次动态创建该元素样式无法生效
ScoloveCode的博客
08-27 888
Vue删除一个DOM元素后再次动态创建该元素样式无法生效 原因:因为页面在编译的时候会在样式前加一个data-xxxx的编号,你把这个元素删除了,再次创建元素后不会生成这个编号,就算生成了编号也不是一样的 所以就会导致没有样式,可以使用开发者检查工具也就是F12,看一下元素的样式. 解决方法: 1.去掉scoped,如果你有子组件,并且有重复的类名或id名会很麻烦 2.样式写在全局,这有可能会造成环境污染 3.使用穿透: >>> 穿透 或者 穿透 或者 ::v-deep 强烈推荐 ..
vue 方法中js动态创建dom，拼接元素图片不显示
YUSIR 完美CODING世界
02-15 5805
var ob = '&lt;ul class="layer_notice"&gt;'; for (var j = 0;j &lt; this.deviceDetailArray.length;j++) { if(this.deviceDetailArray[j].kinds == 1){ o...
vue 修改dom style_Vue实战066：自定义指令及使用
weixin_42306083的博客
02-02 698
什么是Vue指令Vue指令是一种附加到DOM元素上的特性，通常以"v-"作为前缀来告诉Vue这是一种特殊的标记， 当渲染到该DOM时就会执行指令特性，以实现对HTML元素的一些行为控制。Vue内置了很多指令，下面列出一些常用的指令：除了默认核心指令Vue 也允许注册自定义指令，前面这篇文章Vue实战056：input框自动获取焦点中就用到了自定义指令的功能。在全局注册一个指令v-focus，然后在...
vue项目中js原生获取dom元素添加事件，获取不到dom元素？
chj_2020的博客
02-09 1720
js原生方法获取不到dom，无法添加事件 原因是要获取的dom元素有v-if判断，在加载的时候判断还未执行所以无法获取 建议将v-if换做v-show 如果不想换v-if，可以在获取dom元素的方法前加一个延时器也可以获取 ...
关于动态生成dom绑定事件失效的原因及解决方法
Drift King 的博客
11-29 1143
之前做项目都是直接用jquery的bind绑定事件，不过当时都不是动态生成dom元素，而是已经页面中原本存在的dom元素进行事件绑定，最近在测试给动态生成的dom绑定事件的时候发现事件失效，于是就测试了一下： 1. 事件失效的原因： （1）bind事件绑定只对dom中存在的元素有效，对于我们后来动态增加的元素是监测不到，所以绑定不了 （2）同样，当你使用var aa = docu
问题记录：vue的dom操作
unAlpaca的博客
02-22 188
结论： 有点二，一定要记住mvvm框架，是基于数据驱动，基于数据驱动，基于数据驱动！！！操作dom是很蠢的行为，不到不得已最好别操作dom.document.getElementBy..这种都最好使用this.$refs.去取。结论重申明：不要操作dom 事情经过： 我最近做用vue做了一个简历，大概7个页，可以翻的那种，然后我想在首页展现我之前写的一个demo,星星海。如下图 这是我用原...
vue动态创建dom元素
07-29
在Vue中，可以使用createElement函数动态创建DOM元素。createElement函数接受三个参数，分别是标签名、属性对象和子元素。通过调用createElement函数，可以创建一个虚拟节点（vnode），然后将其插入到父元素中。 例如，如果要创建一个div标签，并给其添加子元素，可以使用以下代码： ```javascript render(createElement) { return createElement('div', {}, \[ createElement('p', {}, '这是一个段落'), createElement('span', {}, '这是一个span元素') \]) } ``` 在上述代码中，createElement('div', {}, \[...\])创建了一个div标签，并使用第三个参数添加了两个子元素p和span。 另外，如果想要创建组件节点，可以使用createComponent函数。在Vue的组件系统中，子组件的初始化创建是在createElm函数中进行的。 总结起来，Vue动态创建DOM元素可以通过createElement函数来实现，同时也可以使用createComponent函数来创建组件节点。 #### 引用[.reference_title] - *1* *3* [Vue.js源码解析-Vue初始化流程之动态创建DOM](https://blog.csdn.net/weixin_57699483/article/details/118994933)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue2笔记_01创建vdom并挂载到dom元素上](https://blog.csdn.net/qq_43260366/article/details/126908076)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值