情況復現：
風平日和的一個下午，剛剛轉戰準備放棄v-if,v-show,v-for復雜繞彎子
準備用appendChild來做一個簡單的聊天樣式，
結果怎么寫樣式就是加不上去～人麻了
直接上結論：
如果你遇到了同樣的問題，相信你哪有時間看我一步步分析的
結果是：
我拜倒在scoped的腳下🦶
因為我是放在組件里面，scoped將其說白了隔離起來了
然后我相當于在頁面中不停的加入了空白的class樣式，怎么可能成立嘛！
👉這篇文章很好地說明了原理文章地址
問題解決
- 首先我懷疑🤨的是 我學的js是假的～
樣式在檢查元素中很明顯看到我已經加上去了，但就是沒效果
- 其次我換個方法：試試jQuery
同樣的沒效果！！！
- 當我沒啥辦法準備放棄的時候
哦豁～柳暗花明～ 突然Vue的scoped！！
原理分析
總結：scoped的渲染規則：（來自參考）
- 給HTML的dom節點添加一個不重復的data屬性來唯一標識這個dom 元素
- 在每句css選擇器的末尾(編譯后生成的css陳述句)加一個當前組件的data屬性選擇器(例如：[data-v-5558831a])來私有化樣式
平時我們都知道用scoped來防止污染～
但是一下子沒轉過彎～吃了基礎的虧
哎～獻給1024的文章
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/335157.html
標籤：其他
上一篇：Hooks + TS 搭建一個任務管理系統（四）-- 搜索功能實作
下一篇：vue中echarts使用記錄