当前位置: 首页 > news >正文

【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]

http://www.lryc.cn/news/400637.html

相关文章:

  • maven项目容器化运行之2-maven中使用docker插件调用远程docker构建服务并在1Panel中运行
  • 电影购票小程序论文(设计)开题报告
  • IP风险画像 金融行业的安全盾牌
  • 探索老年综合评估实训室的功能与价值
  • 视频剪辑软件如何选?FCPX和PR更适合新手呢
  • 解决第三方模块ts声明文件编译错误问题
  • 数据结构小测试:排序算法
  • 电脑远程开关机
  • # Redis 入门到精通(四)-- linux 环境安装 redis
  • SQL进阶技巧:如何按照固定尺寸(固定区间)对数据进行打分类标签?
  • 数学建模·灰色关联度
  • EMQX开源版安装
  • R语言进行集成学习算法:随机森林
  • 虚拟机的状态更新
  • 基于hive数据库的泰坦尼克号幸存者数据分析
  • excel根据数据批量创建并重命名工作表
  • 智能合约和分布式应用管理系统:技术革新与未来展望
  • Spring MVC 中的拦截器的使用“拦截器基本配置” 和 “拦截器高级配置”
  • MyBatis框架学习笔记(四):动态SQL语句、映射关系和缓存
  • 【C++PythonJava】字符处理详细解读_字符_ASCLL码_字母数字转换_算法竞赛_开发语言
  • 人像视频淡入淡出效果的灵敏检验方法
  • Unity UGUI Image Maskable
  • SpringCloud | 单体商城项目拆分(微服务)
  • uniapp 如何实现路由拦截,路由守卫
  • 人工智能算法工程师(中级)课程13-神经网络的优化与设计之梯度问题及优化与代码详解
  • Qt/QML学习-ComboBox
  • 微服务实战系列之玩转Docker(一)
  • Java中常见的语法糖
  • 数据库使用SSL加密连接
  • 华为OD算法题汇总