【Vue】 style中的scoped

一、什么是scoped,为什么要用

在vue文件中的style标签上,有一个特殊的属性:scoped。

当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,通过该属性,可以使得组件之间的样式不互相污染。

二、scoped的原理

为组件实例生成一个唯一标识,给组件中的每个标签对应的dom元素添加一个标签属性,data-v-xxxx
给<style scoped>中的每个选择器的最后一个选择器添加一个属性选择器,原选择器[data-v-xxxx],如:原选择器为.container #id div,则更改后选择器为.container #id div[data-v-xxxx]

相关推荐

  1. 【Vue】 stylescoped

    2024-07-16 13:54:04       18 阅读
  2. ElasticSearchScirpt Score查询

    2024-07-16 13:54:04       28 阅读
  3. VUE---组件样式冲突scoped

    2024-07-16 13:54:04       49 阅读
  4. 【Golang】使用 GORM Scopes 进行查询

    2024-07-16 13:54:04       29 阅读
  5. Elastic script_score使用

    2024-07-16 13:54:04       43 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-16 13:54:04       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-16 13:54:04       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-16 13:54:04       58 阅读
  4. Python语言-面向对象

    2024-07-16 13:54:04       69 阅读

热门阅读

  1. 乡镇集装箱生活污水处理设备处理效率高

    2024-07-16 13:54:04       16 阅读
  2. 2.CATIA:与其他程序及COM库集成的方式(1/2)

    2024-07-16 13:54:04       19 阅读
  3. 微服务中的 “负载均衡策略” 简介

    2024-07-16 13:54:04       26 阅读
  4. 深入了解 Oracle 版本命名中的 i、g 及 c

    2024-07-16 13:54:04       24 阅读
  5. oracle adg切换

    2024-07-16 13:54:04       28 阅读
  6. TCP、UDP、TCP与UDP的区别及联系

    2024-07-16 13:54:04       25 阅读
  7. 多线程-CompletableFuture类

    2024-07-16 13:54:04       25 阅读
  8. window下minio的备份

    2024-07-16 13:54:04       19 阅读