在网页上看到了data-v-xxxx是什么原因
在Vue开发中,会遇到html被浏览器解析后,在标签中出现’data-v-xxxxx’标记,如下:<div data-v-fcba8876 class="xxx"></div>原因:<style scoped>@media (min-width: 250px) {.list-container:hover {background: orange;}}</s
在Vue开发中,会遇到html被浏览器解析后,在标签中出现’data-v-xxxxx’标记,如下:
<div data-v-fcba8876 class="xxx"></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'标记
官方解释:https://vuejs.org/v2/guide/comparison.html#HTML-amp-CSS
参考文档:https://blog.csdn.net/fengjingyu168/article/details/79769608
更多推荐
所有评论(0)