[JavaScript知识库]记Vue中appendChild加不上class样式到解决

情况复现：

风平日和的一个下午。刚刚转战准备放弃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的文章