Vue删除一个DOM元素后再次动态创建该元素样式无法生效

Vue删除一个DOM元素后再次动态创建该元素样式无法生效

原因:因为页面在编译的时候会在样式前加一个data-xxxx的编号,你把这个元素删除了,再次创建元素后不会生成这个编号,就算生成了编号也不是一样的 所以就会导致没有样式,可以使用开发者检查工具也就是F12,看一下元素的样式.

解决方法:

1.去掉scoped,如果你有子组件,并且有重复的类名或id名会很麻烦

2.样式写在全局,这有可能会造成环境污染

3.使用穿透: >>> 穿透 或者 /deep/ 或者 ::v-deep 强烈推荐

例子:

/deep/ .box{
	.first{}
	.last{}
}

注意:只在最外层写穿透即可.