现象:
在Vue开发中,会遇到html被浏览器解析后,在标签中出现’data-v-xxxxx’标记,如下:
<div data-v-fcba8876 class="xxx"> aaa</div>
原因:
来看官方解释:
<style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
</style>
The optional scoped attribute automatically scopes this CSS to your component by adding a unique attribute (such as data-v-21e5b78) to elements and compiling .list-container:hover to something like .list-container[data-v-21e5b78]:hover.
本人理解:
这是在标记vue文件中css时使用scoped标记产生的,因为要保证各文件中的css不相互影响,给每个component都做了唯一的标记,所以每引入一个component就会出现一个新的'data-v-xxx'标记