记Vue中appendChild加不上class样式到解决

最新推荐文章于 2024-03-04 18:43:06 发布
最新推荐文章于 2024-03-04 18:43:06 发布
阅读量5.6k 收藏 1
点赞数 7
分类专栏： 开发 文章标签： 1024程序员节 css3 vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51485807/article/details/120939915
版权
在尝试使用appendChild实现简单聊天样式时，遇到样式无法生效的问题。原来是scoped属性导致样式隔离，使得样式无法应用。通过理解scoped的工作原理，了解到它会给DOM添加data属性并限制样式作用域。解决方法是避免在组件内使用scoped，或利用CSS Modules等其他方式实现样式隔离。
摘要由CSDN通过智能技术生成

情况复现：

风平日和的一个下午。刚刚转战准备放弃v-if,v-show,v-for复杂绕弯子

准备用appendChild来做一个简单的聊天样式。

结果怎么写样式就是加不上去～人麻了

直接上结论：

如果你遇到了同样的问题，相信你哪有时间看我一步步分析的

结果是：

我拜倒在scoped的脚下🦶

因为我是放在组件里面，scoped将其说白了隔离起来了

然后我相当于在页面中不停的加入了空白的class样式，怎么可能成立嘛！

👉这篇文章很好地说明了原理文章地址

问题解决

  • 首先我怀疑🤨的是 我学的js是假的～

样式在检查元素中很明显看到我已经加上去了。但就是没效果

  • 其次我换个方法：试试jQuery

同样的没效果！！！

  • 当我没啥办法准备放弃的时候

哦豁～柳暗花明～ 突然Vue的scoped！！

原理分析

总结：scoped的渲染规则：（来自参考）

  1. 给HTML的dom节点添加一个不重复的data属性来唯一标识这个dom 元素
  2. 在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(例如：[data-v-5558831a])来私有化样式

平时我们都知道用scoped来防止污染～

但是一下子没转过弯～吃了基础的亏

哎～献给1024的文章

望向天空的恒毅
关注
专栏目录
js append html 后点击点击事件和样式不生效
zhengxiaoya2017的博客
08-01 1799
最近在做一个点击一个按钮追加一行的功能时，发现通过js代码append 的html 的点击事件和页面样式不生效。 var tr = "<div id='appendDiv"+i+"' class='form-row'> " + " <div class='form-group col-1'><label>
Vue 09Vue中使用行内样式---class
mqingo的博客
01-02 2818
09Vue中使用样式---class.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;09Vue中使用样式----class&lt;/title&gt; &lt;script type="text/javascript
vue内appendchild元素后添加类名设置样式不生效问题
m0_74138212的博客
11-22 463
第一次遇见这个问题，记录一下，方便以后自己使用。如果是这个原因，你可以把这个类放在单独的一个。里面的类是不生效的。
appendChild不生效？
qq_42434039的博客
11-15 643
得到的是数组对象 <script> var elem_li = document.createElement('li'); // 生成一个 li元素 elem_li.innerHTML = '这是增加的一行'; // 设置元素的内容 document.getElementsByClassName('wp_nav')[1].appendChild(elem_li); // 添加到UL中去 </script> ...
appendChild加入子节点失效
qq_44473483的博客
11-03 682
appendChild加入子节点失效
Tip: appendChild能添加id节点不能添加class节点集合
Lachesis_的博客
06-21 351
<script> //1 function $( s ) { return document.getElementsByClassName( s ); }; //2 function $$( s ) { return document.getElementById( s ); } function LoadIframe () { var newIframeObject = document.createElement( "IFRAME" );
基于 Vue3打造前台+中台通用提效解决方案（上）
oschina_41559824的博客
03-04 2190
本项目使用 + 来实现前中台解决方案因为，之前的项目一直都是使用作为构建工具；出来这么久了，也没有用过；所以想在当前项目下进行使用；webpack vite 2.2、这么快会有什么问题吗？ 如果大家对的构建机制有了解的话，那么应该可以发现一个问题。 那就是**既然以原生的方式为浏览器提供源码，让浏览器接管了打包的部分工作**，那么假如我们的项目中存在 的内容怎么办?是不是就意味着无法解析呢? 是的! 在 的早期版本中，确实存在这个问题，这个问题导致的最核心的麻烦就是很多的依赖无法使用。 比如 因为
vue实现图片上刻度尺功能，原生css
最新发布
05-29
在Vue.js框架中实现图片上的刻度尺功能，主要涉及到图像处理、CSS样式设计以及JavaScript交互。这个功能可能用于各种用途，比如图表分析、测量工具等。以下将详细阐述实现这个功能所需的关键技术和步骤。 首先，...
vue中的一些知识
zy的博客
01-26 1116
v-model 多用于表单元素实现双向数据绑定 v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json v-show 显示内容 ,通过display=block/none来控制元素隐藏出现 v-hide 隐藏内容 同上 v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false） v-else-if 必须和v-if连用 v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误 v-bind
vue中使用extend
weixin_61032994的博客
04-29 330
1.新建两个文件js-To.js和toast.vue 2.toast.vue组件里的代码 <template> <div class="msg" v-show="toastShow" v-html="toastVal"></div> </template> <script> export default { name:'Toast' } </script> <style lang="less" scoped&g
前端开源库-vue-append
08-29
前端开源库-vue-appendvue append，vue append，类似v-html指令，但它可以调用javascript函数
vue-append:vue-append，类似于v-html指令，但可以调用javascript函数
05-25
附加值 vue-append，类似于v-html指令，但可以调用javascript函数 安装 npm install vue-append --save # or yarn add vue-append ES6模块 通过npm作为vue-append可用。 import VueAppend from 'vue-append' Vue . use ( VueAppend ) 普通JS var VueAppend = require ( 'vue-append' ) Vue . use ( VueAppend ) 直接包含 您也可以直接在[removed]标记中添加它。 它将自动安装自身，并添加一个全局VueAppend 。 事件 附加的 如果html append，脚本已下载且没有抛出错误，则将触发appended事件。 附加器 如果在添加html时抛出错误，则将触发a
使用append方法动态添加代码时css样式失效/append重复添加内容
qq_45128278的博客
04-12 2228
防止append重复添加，在append之前使用empty，但是我使用之后第二次css样式失效了，解决方法见下文： $("#contact").empty(); $("#contact").append(contactstr); 下面的内容是转载的： $("#所在标签id").append(obj); // 用append 方式添加拼接的标签 $("#所在标签id").listview(“re...
vue.js怎么动态的添加class名称以及判断只给对应的一个添加
热门推荐
qq_40039641的博客
01-09 1万+
{active:index==dynamic}">{{index}}{{listRenderingList.text}} var listRenderingVm=new Vue({ el:'#listRendering', data:{ listRenderingLists:[{ text:'Foo' },{ text:'Bar' },{ text:'Foo Bar'
利用appendChild和数组结合解决创建多个元素效果，或者在图片上显示点位信息
qq_72760247的博客
04-01 325
利用appendChild和数组结合解决创建多个元素效果
原生js动态添加style，添加样式
03-28 7980
原生js动态添加style，添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ele=document.createElement("style"); ele.innerHTML=style; document.getElementsByTagName('head')[0].appendChi...
Js & Vue 使用 appendChild 后源元素(节点)消失了
cookcyq__的博客
11-24 1553
据官方文档 [https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild] 里面的开头说明： 明确指出源节点消失是引用问题，要想保留源(元素)节点可以使用 Node.cloneNode(true) 属性，其中 true 表示深拷贝。 ...
js 使用append的时候 添加样式为纯文本，完美解决方案
weixin_43896021的博客
05-25 412
在向网页中使用append的时候 添加样式为纯文本。需要先createElement创建添加属性。
原生js动态添加样式表
fairyier
05-04 9726
原生js给html动态添加样式表：1.创建标签&lt;style&gt;添加一张内置样式表 var style1 = document.createElement('style'); style1.innerHTML = 'body{color:red}#top:hover{background-color: red;color: white;}';...
vue3 quasar 读取pdf到页面上，可拖动缩放
07-13
你可以使用Quasar Framework和PDF.js库来实现在Vue 3中读取并在页面上显示PDF文件，并添加可拖动和缩放功能。下面是一个简单的步骤： 1. 安装Quasar Framework和PDF.js库： ```bash npm install quasar npm install pdfjs-dist ``` 2. 在Vue组件中引入所需的库和样式： ```vue <template> <div> <div ref="pdfContainer" class="pdf-container"></div> </div> </template> <script> import pdfjsLib from 'pdfjs-dist' export default { mounted() { this.loadPDF() }, methods: { async loadPDF() { const pdfUrl = 'path/to/your/pdf/file.pdf' const container = this.$refs.pdfContainer const loadingTask = pdfjsLib.getDocument(pdfUrl) const pdf = await loadingTask.promise const page = await pdf.getPage(1) const viewport = page.getViewport({ scale: 1 }) const canvas = document.createElement('canvas') canvas.className = 'pdf-canvas' container.appendChild(canvas) const context = canvas.getContext('2d') canvas.width = viewport.width canvas.height = viewport.height const renderContext = { canvasContext: context, viewport: viewport } await page.render(renderContext) } } } </script> <style> .pdf-container { position: relative; } .pdf-canvas { cursor: move; } </style> ``` 3. 然后，在需要显示PDF的地方使用该组件： ```vue <template> <div> <pdf-viewer></pdf-viewer> </div> </template> <script> import PdfViewer from './PdfViewer.vue' export default { components: { PdfViewer } } </script> ``` 以上代码将在页面上显示PDF，并且允许你拖动和缩放。你可以根据需要自定义样式和添加其他功能。注意，这只是一个基本示例，你可能需要根据实际需求进行修改和完善。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值