Vue3新增加的css语法糖
一、deep
<template><div class=""><el-input /> </div>
</template>
<style scoped>
/* 样式穿透 */
:deep input {background: red;
}
</style>
二、slotted
子组件修改插槽里面的样式
<template><div class=""><child><div></div></child></div>
</template><style scoped>
/* 修改插槽样式 */
:slotted(div) {background: red;
}
</style>
三、global
scoped里面依然可以写全局样式
<template><div class=""></div>
</template>
<style scoped>
/* 全局样式 */
:global(div) {background: red;
}
</style>
四、v-bind
<template><div class=""></div>
</template>
<script setup lang="ts">
import { ref } from "vue"
const bag = ref<string>('red')
</script>
<style scoped>
/* 动态样式*/
div {background: v-bind(bag)
}
</style>
五、module
<!-- 将生成的 CSS 类作为 $style 对象的键暴露给组件 -->
<template><div :class="$style.title"></div>
</template><style module>
.title {color: red;
}
</style><!-- 将生成的 CSS 类作为 jx 对象的键暴露给组件-->
<template><div :class="jx.title"></div>
</template>
<style module="jx">
.title {color: red;
}
</style>
可以通过获取
<script setup lang="ts">
import { useCssModule } from "vue"
const jx = useCssModule('jx')
console.log(jx.title);
const user = `<div class="${jx.title}">12313</div>`
</script>
<style module="jx">
.title {color: red;
}
</style>
相关文章:
Vue3新增加的css语法糖
一、deep <template><div class""><el-input /> </div> </template> <style scoped> /* 样式穿透 */ :deep input {background: red; } </style> 二、slotted 子组件修改插槽里面的样式 <template><div clas…...
Windows安装Vmware 虚拟机
目录 一、Vmware 虚拟机介绍 二、Vmware 虚拟机的三种网络模式 2.1桥接模式 2.2仅主机模式 2.3NAT 网络地址转换模式 三、Vmware 虚拟机的安装 一、Vmware 虚拟机介绍 VMware Workstation Pro 是一款可以在个人电脑的操作系统上创建一个完全与主机操作系统隔离的 虚拟机&…...
uniapp地图手动控制地图scale
前言 首次使用uniapp开发地图过程中,发现uniapp地图居然没有提供手动控制地图scale的方法,这个也着实没有想到,查了半天资料,也终于找到一个方法能够比较好的控制scale,做个记录。 代码 要定义一个地图mapÿ…...
Kotlin学习之函数
原文链接 Understanding Kotlin Functions 函数对于编程语言来说是极其重要的一个组成部分,函数可以视为是程序的执行,是真正活的代码,为啥呢?因为运行的时候你必须要执行一个函数,一般从主函数入口,开始一…...
若依启动步骤
1.创建数据库 2.启动redis 3.改后端的数据库连接配置 4.配置redis redis的地址:cmd中ipconfig命令查看 6.启动后端:如下 7.启动前端ruoyi-ui中 先运行npm install,再npm run dev。项目就启动成功了。 用户名:admin 密码&#x…...
qt-C++笔记之两个窗口ui的交互
qt-C笔记之两个窗口ui的交互 code review! 文章目录 qt-C笔记之两个窗口ui的交互0.运行1.文件结构2.先创建widget项目,搞一个窗口ui出来3.项目添加第二个widget窗口出来4.补充代码4.1.qt_widget_interaction.pro4.2.main.cpp4.3.widget.h4.4.widget.cpp4.5.second…...
Redis-核心数据结构
五种数据结构 String结构 String结构应用场景 Hash结构 Hash结构应用场景 List结构 List结构应用场景 Set结构 Set结构应用场景 ZSet有序结构 ZSet有序结构应用场景...
设计模式—结构型模式之外观模式(门面模式)
设计模式—结构型模式之外观模式(门面模式) 外观(Facade)模式又叫作门面模式,是一种通过为多个复杂的子系统提供一个一致的接口,而使这些子系统更加容易被访问的模式。 例子 我们的电脑会有很多 组件&am…...
CentOS Stream 9-使用 systemd 管理自己程序时自定义日志路径
systemd 文件 [rootnode1 ~]# cat /etc/systemd/system/spms-wvp.service [Unit] DescriptionWVP service [Service] # 关键配置部分,注意这里的 spms-wvp ,后面需要用 SyslogIdentifierspms-wvp StandardOutputsyslog StandardErrorsyslog Typesimple Environment…...
动态页面调研及设计方案
文章目录 vue2 动态表单、动态页面调研一、form-generator二、ng-form-element三、Variant Form四、form-create vue2 动态表单、动态页面调研 一、form-generator 预览:https://mrhj.gitee.io/form-generator/#/ Vue2 Element UI支持拖拽生成表单不支持其他组件…...
鸿蒙4.0开发笔记之DevEco Studio之配置代码片段快速生成(三)
一、作用 配置代码片段可以让我们在Deveco Studio中进行开发时快速调取常用的代码块、字符串或者某段具有特殊含义的文字。其实现方式类似于调用定义好变量,然而这个变量是存在于Deveco Studio中的,并不会占用项目的资源。 二、配置代码段的方法 1、打…...
HarmonyOS真机调试报错:INSTALL_PARSE_FAILED_USESDK_ERROR处理
文章目录 1、 新建应用时选择与自己真机匹配的sdk版本2、 根据报错提示连接打开处理方案3、查询真机版本对应的**compileSdkVersion** 和 **compatibleSdkVersion** 提示3.1版本之后和3.1版本之前的不同命令(此处为3.0版本)4、根据查询修改参数5、连接成…...
webSocket基于面向对象二次封装
今天不睡,熬夜赶了个WebSocket 二次封装,也对这几天文章摸鱼感到抱歉,所以我出了一个注释非常非常全的代码 思路如下 首先,需要通过调用connect方法来建立WebSocket连接。当连接成功时,会调用我提供的回调函数,并将连接成功的消息帧作为参数…...
【Web】PHP反序列化的一些trick
目录 ①__wakeup绕过 ②加号绕过正则匹配 ③引用绕过相等 ④16进制绕过关键词过滤 ⑤Exception绕过 ⑥字符串逃逸 要中期考试乐(悲) ①__wakeup绕过 反序列化字符串中表示属性数量的值 大于 大括号内实际属性的数量时,wakeup方法会被绕过 (php5-p…...
【测试功能篇 01】Jmeter 压测接口最大并发量、吞吐量、TPS
压力测试,我们针对比较关键的接口,可以进行相应的压力测试,主要还是测试看看接口能抗住多少的请求数,TPS稳定在多少,也就是吞吐量多少 安装 Jmeter的安装很简单,官网下载地址 http://jmeter.apache.org/ &…...
代码随想录算法训练营第四十九天| 123.买卖股票的最佳时机III 188.买卖股票的最佳时机IV
文档讲解:代码随想录 视频讲解:代码随想录B站账号 状态:看了视频题解和文章解析后做出来了 123.买卖股票的最佳时机III class Solution:def maxProfit(self, prices: List[int]) -> int:if len(prices) 0:return 0dp [[0] * 5 for _ in…...
11.20 知识总结(choices参数、MVC和MTV的模式、Django与Ajax技术)
一、 choices参数的使用 1.1 作用 针对某个可以列举完全的可能性字段,我们应该如何存储 .只要某个字段的可能性是可以列举完全的,那么一般情况下都会采用choices参数 1.2 应用场景 应用场景: 学历: 小学 初中 高中 本科 硕士…...
深度学习二维码识别 计算机竞赛
文章目录 0 前言2 二维码基础概念2.1 二维码介绍2.2 QRCode2.3 QRCode 特点 3 机器视觉二维码识别技术3.1 二维码的识别流程3.2 二维码定位3.3 常用的扫描方法 4 深度学习二维码识别4.1 部分关键代码 5 测试结果6 最后 0 前言 🔥 优质竞赛项目系列,今天…...
C#关于TimeSpan结构的使用和获取两个时间差
C#中的TimeSpan结构可以获取两个时间的时间差。 它主要具有以下属性和方法: 属性: Days:获取时间间隔的天数部分。Hours:获取时间间隔的小时数部分(不包括整天的小时数)。Minutes:获取时间间…...
Git分支管理
愿所有美好如期而遇 目录 理解分支 创建分支 切换分支 合并分支 删除分支 合并冲突 分支管理策略 理解分支 每次提交master都会前进一步,随着不断提交,master分支的线越来越长,而HEAD指向哪条分支就是当前工作的分支。 master分支是我…...
如何用OpenShamrock打造智能QQ机器人:从零开始的完整指南
如何用OpenShamrock打造智能QQ机器人:从零开始的完整指南 【免费下载链接】OpenShamrock A Bot Framework based on Xposed with OneBot11 项目地址: https://gitcode.com/gh_mirrors/op/OpenShamrock OpenShamrock是一款基于Xposed框架实现的QQ机器人开发工…...
电商人必看!RMBG-2.0轻量抠图实战:证件照换背景+短视频素材一键生成
电商人必看!RMBG-2.0轻量抠图实战:证件照换背景短视频素材一键生成 还在为商品图片抠图发愁吗?每天处理几十张产品图,用PS一点点抠边缘,既费时间又费眼睛?或者需要给员工批量制作证件照,但换背…...
PS CC 2019安装避坑指南:解决86%卡住和D3DCOMPILER_47.dll缺失问题
Photoshop CC 2019完整安装指南:从下载到故障排除 Photoshop CC 2019作为Adobe Creative Cloud系列中的重要版本,至今仍被许多设计师和摄影师所青睐。虽然Adobe已推出更新的版本,但2019版因其稳定性和适中的系统需求,依然是中低配…...
GeographicLib:高精度大地测量计算C++库架构解析与实战指南
GeographicLib:高精度大地测量计算C库架构解析与实战指南 【免费下载链接】geographiclib Main repository for GeographicLib 项目地址: https://gitcode.com/gh_mirrors/ge/geographiclib GeographicLib是一个专为大地测量和地理空间计算设计的C库…...
磁盘 I/O 性能优化
磁盘 I/O 性能优化是一个从硬件、系统内核、文件系统、应用程序到I/O 模式的全链路优化过程,核心目标是减少磁盘访问次数、降低延迟、提升吞吐量与 IOPS。硬件层面 1. 存储介质升级HDD → SATA SSD → NVMe SSD:随机读写性能提升 10–100 倍,…...
SuGaR与NeRF对比分析:为什么高斯泼溅是未来趋势
SuGaR与NeRF对比分析:为什么高斯泼溅是未来趋势 【免费下载链接】SuGaR [CVPR 2024] Official PyTorch implementation of SuGaR: Surface-Aligned Gaussian Splatting for Efficient 3D Mesh Reconstruction and High-Quality Mesh Rendering 项目地址: https://…...
电容耦合等离子刻蚀(CCP)在先进芯片制造中的关键作用与工艺优化
1. 电容耦合等离子刻蚀(CCP)技术解析 第一次接触CCP刻蚀设备时,我被它那看似简单却暗藏玄机的结构震撼到了——两块金属电极板,加上射频电源,就能实现纳米级的精密加工。这种利用电容耦合原理产生等离子体的技术&#…...
OEC-turbo变废为宝:从吃灰PCDN盒子到家庭服务器,Armbian/OpenWrt刷机实战记录
OEC-turbo硬件改造指南:从闲置PCDN设备到全能家庭服务器 手上闲置的OEC-turbo盒子除了吃灰还能做什么?这款搭载RK3568芯片的设备实际上是一块被低估的硬件宝藏。相比市面上热门的斐讯N1等矿渣设备,OEC-turbo在处理器性能、内存配置和扩展性方…...
springboot+vue基于web的个人博客论坛交流网站
目录同行可拿货,招校园代理 ,本人源头供货商核心功能模块分析技术实现要点扩展功能设计安全防护措施项目技术支持源码获取详细视频演示 :文章底部获取博主联系方式!同行可合作同行可拿货,招校园代理 ,本人源头供货商 核心功能模块分析 用户管理模块 注…...
千问3.5-2B集成IDEA开发环境:Java大模型应用快速构建指南
千问3.5-2B集成IDEA开发环境:Java大模型应用快速构建指南 1. 为什么要在IDEA中集成大模型? 作为Java开发者,我们经常需要在项目中处理各种文本处理任务。传统方式要么需要调用外部API(有网络延迟和费用问题)…...
