vue组件样式 scoped 冲突

vue组件样式 冲突
在这里插入图片描述

<template><div class="base-one">BaseOne</div>
</template><script>
export default {};
</script>/* 1.style中的样式 默认是作用到全局的2.加上scoped可以让样式变成局部样式组件都应该有独立的样式,推荐加scoped(原理)-----------------------------------------------------scoped原理:1.给当前组件模板的所有元素,都会添加上一个自定义属性data-v-hash值data-v-5f6a9d56  用于区分开不通的组件2.css选择器后面,被自动处理,添加上了属性选择器div[data-v-5f6a9d56]
*/<style  scoped>
div {border: 3px solid blue;margin: 30px;
}
</style>

源码2

<template><div class="base-one">BaseTwo</div>
</template><script>
export default {};
</script>/* div{border: 3px solid red;margin: 30px;} */
//
//<style  scoped>
div {border: 3px solid red;margin: 30px;
}
</style>

源码3

<template><div class="app"><BaseOne></BaseOne><BaseTwo></BaseTwo></div>
</template><script>
import BaseOne from "./components/BaseOne.vue";
import BaseTwo from "./components/BaseTwo.vue";export default {name: "App",components: {BaseOne,BaseTwo,},
};
</script><style scoped>
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/141250.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何将前后端分离的项目部署在服务器上

宝塔Linux部署&#xff1a; 因为要部署前端我们先下个nigx Tomcat,下载这个只是为了java&#xff0c;它里面包含java的 前端 在去添加站点&#xff0c;域名暂时是自己的公网 然后打开新建的站点&#xff0c;把里面的文件全删掉&#xff0c;再把自己的前端dist里的文件全选拖…

使用ALU,RAM,寄存器打造一个CPU

CPU简介 计算机的心脏是中央处理单元&#xff0c;简称“CPU” 。这篇文章就利用前几篇文章中提到过的ALU,RAM,寄存器组件做一个CPU。 CPU负责运行程序&#xff0c;程序是由一个个操作组成的&#xff0c;这些操作叫做指令&#xff0c;因为他们“指示”计算机要做什么. CPU能做什…

算法通过村第九关-二分(中序遍历)黄金笔记|二叉搜索树

文章目录 前言1. 有序数组转二叉搜索树2. 寻找连个正序数组的中位数总结 前言 提示&#xff1a;有时候&#xff0c;我感觉自己一辈子活在两个闹钟之间&#xff0c;早上的第一次闹钟&#xff0c;以及5分钟之后的第二次闹钟。 --奥利弗萨克斯《意识的河流》 每个专题都有简单题&a…

上海亚商投顾:沪指震荡反弹 汽车产业链全天强势

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 大小指数昨日集体反弹&#xff0c;沪指3100点失而复得&#xff0c;创业板指一度涨超1.5%&#xff0c;随后涨幅…

echarts学习总结

一、新建一个简单的Echarts 首先新建一个vue2的项目&#xff0c;项目中安装Echarts cnpm install echarts --save1、title标题组件&#xff0c;包含主标题和副标题。 2、tooltip提示框组件 3、 legend图例组件 4、 series

springboot项目中定时任务注解@Scheduled未按cron表达式执行

springboot项目中定时任务注解Scheduled未按cron表达式执行 背景问题复现原因分析解决方法其他原因 背景 在将一个类注入到ioc后&#xff0c;其中定义了几个定时任务&#xff0c;分别是每隔十秒执行一次&#xff0c;但实际情况却是半小时才执行一次&#xff0c;故开始分析原因&…

爬虫怎么批量采集完成任务

目录 一、了解网络爬虫 二、Python与网络爬虫 三、批量采集任务的实现 1.确定采集网站及关键词 2.安装相关库 3.发送请求并获取响应 4.解析HTML文档 5.提取文章内容 6.保存文章内容 7.循环采集多篇文章 8.增加异常处理机制 9.优化代码性能 四、注意事项 总结 在当…

细胞机器人系统的概念

摘要 本文讨论了一种新型机器人系统的理论和工程的概念基础。该系统由协作完成任务的自主机器人单元组成。本文在描述了该系统与细胞自动机和神经网络的相关性和差异后&#xff0c;建立了该系统的基础属性及其对机器人单元结构的影响、它们操作的空间以及它们完成全局任务的算法…

virtualbox安装的linux虚拟机安装并启动Tomcat过程(结合idea操作)记录,并使用宿主机访问页面

virtualbox安装的linux虚拟机安装并启动Tomcat过程&#xff08;结合idea操作&#xff09;记录&#xff0c;并使用宿主机访问页面 参考教程地址linux版本Tomcat下载地址上传解压 启动TomcatVirtualBox虚拟机本地可访问宿主机尚未可以访问关闭防火墙宿主机可以访问 参考教程地址 …

vivado乘法器IP核进行无符号与有符号数相乘问题的验证

本文验证乘法器IP核Multiplier进行无符号(unsigned)与有符号数(signed)相乘的正确性&#xff0c;其中也遇到了一些问题&#xff0c;做此记录。 配套工程&#xff1a;https://download.csdn.net/download/weixin_48412658/88354179 文章目录 问题的讨论验证过程IP核配置例化乘…

ElementUI之登陆+注册

一.什么是ElementUI 二.ElementUI完成用户注册登录界面搭建 使用命令npm install element-ui -S&#xff0c;添加Element-UI模块 导依赖 建立登录和注册页面 ​编辑 配置样式 编写登录页面&#xff08;Login&#xff09; 编写注册页面&#xff08;reginter&#xff09; …

基于Android+OpenCV+CNN+Keras的智能手语数字实时翻译——深度学习算法应用(含Python、ipynb工程源码)+数据集(五)

目录 前言总体设计系统整体结构图系统流程图 运行环境模块实现1. 数据预处理2. 数据增强3. 模型构建4. 模型训练及保存5. 模型评估6. 模型测试 系统测试1. 训练准确率2. 测试效果3. 模型应用1&#xff09;程序下载运行2&#xff09;应用使用说明3&#xff09;测试结果 相关其它…

Spring源码相关

总分结构回答&#xff0c;突出关键接口、类、方法名 run -> AbstractApplicationContext.refresh&#xff08;&#xff09;程序的入口 在IOC中的操作都是基于DefaultListableBeanFactory bd对象保存在map集合中 refresh方法宝包括了整个Spring的执行流程和bean的完整生命…

企业做软文推广的三大错误有哪些?媒介盒子为您解答

软文营销已经成为企业宣传的主要方式&#xff0c;但有很多企业来找媒介盒子咨询&#xff0c;明明花了大量成本来做软文推广&#xff0c;为什么就是没效果呢&#xff1f;小编看了下&#xff0c;发现大部分企业做软文推广效果不明显&#xff0c;基本上犯了三大错误&#xff0c;接…

解决 react 项目启动端口冲突

报错信息&#xff1a; Emitted error event on Server instance at:at emitErrorNT (net.js:1358:8)at processTicksAndRejections (internal/process/task_queues.js:82:21) {code: EADDRINUSE,errno: -4091,syscall: listen,address: 0.0.0.0,port: 8070 }解决方法&#xff…

OpenLayers实战,OpenLayers调用手机陀螺仪方向实现指南针效果

专栏目录: OpenLayers实战进阶专栏目录 前言 本章讲解OpenLayers如何使用手机陀螺仪实现指南针,除了需要调用陀螺仪外,还需要获取手机的实时位置。 通过获取到的实时位置显示箭头图标位置,通过获取陀螺仪水平方向来调整箭头指向。 注意:必须在https请求(带ssl证书)下才…

信创之国产浪潮电脑+统信UOS操作系统体验1:硬件及软件常规功能支持情况介绍

一、引言 由于公司要求支持国产信创&#xff0c;最近办公的笔记本电脑换成了软硬件全国产&#xff0c;由于国产操作系统是在开源linux基础上演进的&#xff0c;在换之前&#xff0c;非常担心操作不方便&#xff0c;周边应用软件少&#xff0c;功能差&#xff0c;内心是比较抗拒…

常见的文件格式

一、C:\fakepath\新建文本文档.txt [object String] 实现方式&#xff1a; <input onchange"test(this.value)" type"file"></input><script>function test(e){console.log(e,Object.prototype.toString.call(e))}</script> 二、…

第77篇:美国APT入侵西北工业大学使用的5款远控后门揭秘

Part1 前言 大家好&#xff0c;我是ABC_123。在几个月前&#xff0c;我反复研读国家计算机病毒应急处理中心的多篇报告及360安全公司发布的各种关于该事件的报道&#xff0c;再结合国外对于美国APT研究报告&#xff0c;花了半个多月的时间复盘了美国APT入侵中国西北工业大学的…

红米note13 秒解锁BL 跳过168 秒解锁BL,红米Redmi Note 13 Pro+ 系列 无需等待168小时,刷入magisk教程 刷机包下载

最近入手了一台红米note13&#xff0c;发现需要等待168小时才能解锁BL&#xff0c;这让我感到非常困扰。不过&#xff0c;经过一番研究&#xff0c;我发现了一个秒解锁BL的方法&#xff0c;无需等待168小时&#xff0c;而且还可以刷入magisk&#xff0c;非常方便。 首先&#x…