在Vue开发中,会遇到html被浏览器解析后,在标签中出现’data-v-xxxxx’标记,如下:

<div data-v-fcba8876 class="xxx"></div>

原因:

 
  1. <style scoped>

  2. @media (min-width: 250px) {

  3. .list-container:hover {

  4. background: orange;

  5. }

  6. }

  7. </style>

  8.  
  9. 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

Logo

前往低代码交流专区

更多推荐