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

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开发地图过程中&#xff0c;发现uniapp地图居然没有提供手动控制地图scale的方法&#xff0c;这个也着实没有想到&#xff0c;查了半天资料&#xff0c;也终于找到一个方法能够比较好的控制scale&#xff0c;做个记录。 代码 要定义一个地图map&#xff…...

Kotlin学习之函数

原文链接 Understanding Kotlin Functions 函数对于编程语言来说是极其重要的一个组成部分&#xff0c;函数可以视为是程序的执行&#xff0c;是真正活的代码&#xff0c;为啥呢&#xff1f;因为运行的时候你必须要执行一个函数&#xff0c;一般从主函数入口&#xff0c;开始一…...

若依启动步骤

1.创建数据库 2.启动redis 3.改后端的数据库连接配置 4.配置redis redis的地址&#xff1a;cmd中ipconfig命令查看 6.启动后端&#xff1a;如下 7.启动前端ruoyi-ui中 先运行npm install&#xff0c;再npm run dev。项目就启动成功了。 用户名&#xff1a;admin 密码&#x…...

qt-C++笔记之两个窗口ui的交互

qt-C笔记之两个窗口ui的交互 code review! 文章目录 qt-C笔记之两个窗口ui的交互0.运行1.文件结构2.先创建widget项目&#xff0c;搞一个窗口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有序结构应用场景...

设计模式—结构型模式之外观模式(门面模式)

设计模式—结构型模式之外观模式&#xff08;门面模式&#xff09; 外观&#xff08;Facade&#xff09;模式又叫作门面模式&#xff0c;是一种通过为多个复杂的子系统提供一个一致的接口&#xff0c;而使这些子系统更加容易被访问的模式。 例子 我们的电脑会有很多 组件&am…...

CentOS Stream 9-使用 systemd 管理自己程序时自定义日志路径

systemd 文件 [rootnode1 ~]# cat /etc/systemd/system/spms-wvp.service [Unit] DescriptionWVP service [Service] # 关键配置部分,注意这里的 spms-wvp &#xff0c;后面需要用 SyslogIdentifierspms-wvp StandardOutputsyslog StandardErrorsyslog Typesimple Environment…...

动态页面调研及设计方案

文章目录 vue2 动态表单、动态页面调研一、form-generator二、ng-form-element三、Variant Form四、form-create vue2 动态表单、动态页面调研 一、form-generator 预览&#xff1a;https://mrhj.gitee.io/form-generator/#/ Vue2 Element UI支持拖拽生成表单不支持其他组件…...

鸿蒙4.0开发笔记之DevEco Studio之配置代码片段快速生成(三)

一、作用 配置代码片段可以让我们在Deveco Studio中进行开发时快速调取常用的代码块、字符串或者某段具有特殊含义的文字。其实现方式类似于调用定义好变量&#xff0c;然而这个变量是存在于Deveco Studio中的&#xff0c;并不会占用项目的资源。 二、配置代码段的方法 1、打…...

HarmonyOS真机调试报错:INSTALL_PARSE_FAILED_USESDK_ERROR处理

文章目录 1、 新建应用时选择与自己真机匹配的sdk版本2、 根据报错提示连接打开处理方案3、查询真机版本对应的**compileSdkVersion** 和 **compatibleSdkVersion** 提示3.1版本之后和3.1版本之前的不同命令&#xff08;此处为3.0版本&#xff09;4、根据查询修改参数5、连接成…...

webSocket基于面向对象二次封装

今天不睡,熬夜赶了个WebSocket 二次封装,也对这几天文章摸鱼感到抱歉,所以我出了一个注释非常非常全的代码 思路如下 首先&#xff0c;需要通过调用connect方法来建立WebSocket连接。当连接成功时&#xff0c;会调用我提供的回调函数&#xff0c;并将连接成功的消息帧作为参数…...

【Web】PHP反序列化的一些trick

目录 ①__wakeup绕过 ②加号绕过正则匹配 ③引用绕过相等 ④16进制绕过关键词过滤 ⑤Exception绕过 ⑥字符串逃逸 要中期考试乐(悲) ①__wakeup绕过 反序列化字符串中表示属性数量的值 大于 大括号内实际属性的数量时&#xff0c;wakeup方法会被绕过 &#xff08;php5-p…...

【测试功能篇 01】Jmeter 压测接口最大并发量、吞吐量、TPS

压力测试&#xff0c;我们针对比较关键的接口&#xff0c;可以进行相应的压力测试&#xff0c;主要还是测试看看接口能抗住多少的请求数&#xff0c;TPS稳定在多少&#xff0c;也就是吞吐量多少 安装 Jmeter的安装很简单&#xff0c;官网下载地址 http://jmeter.apache.org/ &…...

代码随想录算法训练营第四十九天| 123.买卖股票的最佳时机III 188.买卖股票的最佳时机IV

文档讲解&#xff1a;代码随想录 视频讲解&#xff1a;代码随想录B站账号 状态&#xff1a;看了视频题解和文章解析后做出来了 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 作用 针对某个可以列举完全的可能性字段&#xff0c;我们应该如何存储 .只要某个字段的可能性是可以列举完全的&#xff0c;那么一般情况下都会采用choices参数 1.2 应用场景 应用场景&#xff1a; 学历&#xff1a; 小学 初中 高中 本科 硕士…...

深度学习二维码识别 计算机竞赛

文章目录 0 前言2 二维码基础概念2.1 二维码介绍2.2 QRCode2.3 QRCode 特点 3 机器视觉二维码识别技术3.1 二维码的识别流程3.2 二维码定位3.3 常用的扫描方法 4 深度学习二维码识别4.1 部分关键代码 5 测试结果6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天…...

C#关于TimeSpan结构的使用和获取两个时间差

C#中的TimeSpan结构可以获取两个时间的时间差。 它主要具有以下属性和方法&#xff1a; 属性&#xff1a; Days&#xff1a;获取时间间隔的天数部分。Hours&#xff1a;获取时间间隔的小时数部分&#xff08;不包括整天的小时数&#xff09;。Minutes&#xff1a;获取时间间…...

Git分支管理

愿所有美好如期而遇 目录 理解分支 创建分支 切换分支 合并分支 删除分支 合并冲突 分支管理策略 理解分支 每次提交master都会前进一步&#xff0c;随着不断提交&#xff0c;master分支的线越来越长&#xff0c;而HEAD指向哪条分支就是当前工作的分支。 master分支是我…...

VLN性能飙升的秘密:手把手拆解JanusVLN的‘记忆宫殿’与KV缓存增量更新机制

VLN性能飙升的工程密码&#xff1a;JanusVLN混合缓存与增量更新机制深度解析 视觉语言导航&#xff08;VLN&#xff09;技术正面临一个关键瓶颈——随着导航路径延长&#xff0c;系统需要处理的视觉帧数量呈线性增长&#xff0c;导致计算资源消耗急剧上升。传统方法要么反复处理…...

Linux党福利:Debian12下用VSCode+SDCC玩转51单片机(含WSL配置指南)

Debian 12下构建开源51单片机开发环境&#xff1a;VSCodeSDCC全攻略 在Linux环境下开发51单片机一直是个小众但极具技术挑战性的选择。相比Windows平台上Keil的垄断地位&#xff0c;开源工具链在Linux上的表现往往被低估。本文将带你用VSCodeSDCC在Debian 12上搭建一个完整的51…...

高效掌握多步提示工程:进阶AI任务处理的系统方法论

高效掌握多步提示工程&#xff1a;进阶AI任务处理的系统方法论 【免费下载链接】LangGPT LangGPT: Empowering everyone to become a prompt expert! &#x1f680; &#x1f4cc; 结构化提示词&#xff08;Structured Prompt&#xff09;提出者 &#x1f4cc; 元提示词&#x…...

AlphaFold单元测试:代码质量保证

AlphaFold单元测试&#xff1a;代码质量保证 【免费下载链接】alphafold Open source code for AlphaFold 2. 项目地址: https://gitcode.com/GitHub_Trending/al/alphafold 引言&#xff1a;为什么AlphaFold需要严格的单元测试&#xff1f; AlphaFold作为革命性的蛋白…...

避开这3个坑,你的软考数据库设计题至少多拿10分:从E-R图合并冲突到SQL约束实战

软考数据库设计题避坑指南&#xff1a;从E-R图到SQL约束的实战技巧 每次软考结束&#xff0c;总有一批考生捶胸顿足——"那道数据库设计题明明会做&#xff0c;怎么又丢分了&#xff1f;"作为参加过三次软考阅卷的数据库讲师&#xff0c;我发现90%的失分都集中在几个…...

Cogito 3B实战案例:GitHub PR描述自动生成+变更点总结

Cogito 3B实战案例&#xff1a;GitHub PR描述自动生成变更点总结 1. 快速了解Cogito 3B模型 Cogito v1预览版是Deep Cogito推出的混合推理模型系列&#xff0c;这个3B版本在大多数标准基准测试中都表现出色&#xff0c;超越了同等规模的其他开源模型。简单来说&#xff0c;它…...

基于Phi-4-mini-reasoning的智能运维异常检测系统

基于Phi-4-mini-reasoning的智能运维异常检测系统 1. 运维监控的痛点与智能化需求 运维团队每天都要面对海量的日志数据、监控指标和系统告警。传统监控系统往往只能做到简单的阈值告警&#xff0c;当系统出现异常时&#xff0c;运维人员需要手动翻阅成千上万条日志&#xff…...

Win11Debloat:让你的Windows系统重获新生的终极优化指南

Win11Debloat&#xff1a;让你的Windows系统重获新生的终极优化指南 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declutter and …...

LiuJuan20260223Zimage开箱体验:基于Z-Image LoRA,这个专精模型到底有多好用?

LiuJuan20260223Zimage开箱体验&#xff1a;基于Z-Image LoRA&#xff0c;这个专精模型到底有多好用&#xff1f; 你有没有遇到过这样的情况&#xff1a;想用AI画一个特定的人物&#xff0c;比如你故事里的主角&#xff0c;或者一个IP形象&#xff0c;但生成的图片要么不像&am…...

像素剧本圣殿部署指南:Qwen2.5-14B-Instruct在生产环境中稳定运行的GPU显存优化技巧

像素剧本圣殿部署指南&#xff1a;Qwen2.5-14B-Instruct在生产环境中稳定运行的GPU显存优化技巧 1. 项目概述 像素剧本圣殿&#xff08;Pixel Script Temple&#xff09;是一款基于Qwen2.5-14B-Instruct大模型深度微调的专业剧本创作工具。它将先进的AI推理能力与独特的8-Bit…...