vue 中 通过js插入的dom 无法生效css

问题描述

通过js向div中动态添加dom后，事先写好的css样式对新增的dom不生效

原因

通过测试，这是因为vue文件中的style标签添加了scoped的原因，而scoped的作用是为了保证这些css样式只会对当前vue文件(组件)生效，但是由于其他vue文件(组件)中也有可能会出现相同的class名相同的css样式，于是vue就采用了添加随机后缀的方式防止class名重复的样式出现样式覆盖的情况。

解决办法

把style标签的scoped干掉即可

注意点

当然这么做的前提是你得保证当前vue文件(组件)中的样式不会出现与其他组件样式class重名，否则可能会出现样式覆盖的情况，不过只是一个vue文件(组件)干掉scoped是不会出现样式覆盖的，因为其他的组件可以避免样式覆盖。