The vue component generates an extra data-v-xxx, when it generates an element. how do I get it?

when I use functional rendering, I find that the element I render does not have data-v-xxx, but everything else, and then my style cannot affect the element I rendered manually. The
vue component generates an additional data-v-xxx, when generating the element, or how do I get it, or when I render the function, I also render a data-v-xxx

Nuxt.js vue-loader vue-router vue.js

Mar.10,2021

those with data-v-xxx should be added with the scoped attribute, which is automatically generated by vue.

<style scoped>
  @media (min-width: 250px) {
    .list-container:hover {
      background: orange;
    }
  }
</style>

this optional scoped property automatically adds a unique attribute (such as data-v-21e5b78) to specify the scope for the CSS in the component, and at compile time. List-container:hover will be compiled to look like. List-container [data-v-21e5b78]: hover.

this is only available when scoped is added to the component. You can manually add one to the tag.

<div data-v-231></div>

what do you want to do with this element?

the landlord can use depth selection. / deep/ or > to select the element
ide/scoped-css.html" rel=" nofollow noreferrer "> https://vue-loader.vuejs.org/.

does the landlord have a solution? ask

Don't use scoped

Previous: The crawling order of paging crawlers

Next: How to abandon the previous request using axios, in vue