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

【Vue3】CSS 新特性

:slotted

<template>
<!--  App.vue--><Son ><div class="a">我要插入了</div></Son>
</template><script setup lang="ts">
import Son from './components/Son.vue'
</script><style></style>
<template>
<!--  Son.vue-->插槽:<slot></slot>
</template><script setup lang="ts"></script>
<style scoped>
:slotted(.a) {color: cadetblue;
}
</style>

在这里插入图片描述

:global

<template>
<!--  App.vue--><Son ><div class="a">我要插入了</div></Son>
</template><script setup lang="ts">
import Son from './components/Son.vue'
</script><style scoped>
:global(div) {color: aqua;
}
</style>

v-bind

<template>
<!--  App.vue--><div class="c1">动态css1</div><div class="c2">动态css2</div>
</template><script setup lang="ts">
import {ref} from "vue";
const style1 = ref('lightblue')
const style2 = ref({color: 'lightgreen'
})
</script><style scoped>
.c1 {color: v-bind('style1')
}
.c2 {color: v-bind('style2.color')
}
</style>

在这里插入图片描述

module

<template><!--  App.vue--><div :class="heo.c1">动态css1</div><div :class="[heo.c2, heo.c1]">动态css2</div>
</template><script setup lang="ts">
import {ref} from "vue";</script><style module="heo">
.c1 {color: lightblue
}.c2 {border: 1px solid black;
}
</style>

在这里插入图片描述
如果 module 没有指定名字<style module>,则默认使用:class="$style.c1"

此外,他还有自定义hook useCssModule

在这里插入图片描述

:deep

:deep() 和 样式穿透

相关文章:

【Vue3】CSS 新特性

:slotted <template> <!-- App.vue--><Son ><div class"a">我要插入了</div></Son> </template><script setup lang"ts"> import Son from ./components/Son.vue </script><style></sty…...

四信水电站泄洪预警方案,精准提升防汛应急水平

2022年5月水利部办公厅发布《关于开展水库泄洪设施专项排查整改的紧急通知》&#xff0c;为坚决贯彻落实关于水库大坝安全的重要指示批示精神、关于保障水库泄洪通道通畅的批示要求&#xff0c;全力防范水库可能出现的重大险情&#xff0c;确保水库安全度汛。 2023年3月国家能源…...

k8s中容器的调度与创建:CRI,cgroup

container调度与创建 选自&#xff1a;K8s、CRI与container - packy的文章 - 知乎 https://zhuanlan.zhihu.com/p/102897620 Cgroup创建&#xff1a; cgexec -g cpu,memory:$UUID \ > unshare -uinpUrf --mount-proc \ > sh -c "/bin/hostname $UUID &…...

Unity安装与简单设置

安装网址&#xff1a;https://unity.cn 设置语言&#xff1a; 设置安装位置&#xff1a;否则C盘就会爆了 获取一个个人的资格证&#xff1a; 开始安装&#xff1a; 安装完毕。 添加模块&#xff1a;例如简体中文 新建项目&#xff1a; 布局2*3、单栏布局、 设置…...

数据库的介绍、分类、作用和特点

数据库是用来存储、管理和检索数据的集合系统。根据数据处理模型的不同&#xff0c;数据库可以分为多种类型&#xff0c;主要包括&#xff1a; 1、关系型数据库&#xff08;RDBMS&#xff09;&#xff1a; 介绍&#xff1a;关系型数据库使用表格形式来存储数据&#xff0c;并通…...

【Unity】机器人末端执行器仿真

机械手臂的末端执行器使用多项式来计算转动角度可能有几个原因&#xff1a; 精确控制&#xff1a;机械臂的运动通常需要高度的精确性&#xff0c;特别是在精密工作或复杂运动轨迹的情况下。多项式&#xff0c;特别是高阶的&#xff0c;可以很好地近似复杂的非线性关系和运动轨迹…...

更换个人开发环境后,pycharm连接服务器报错Authentication failed

原因&#xff1a;服务器中更换个人开发环境后&#xff0c;密码变了。 解决&#xff1a;在pycharm中修改服务器开发环境密码即可。 1 找到Tools-Depolyment-Configuration 2 点击SSH Configuration后的省略号 3 修改这里面的Password即可...

E - Bad Juice

解题思路 由于最后返回一个01字符串表示所选人的状态要求人数最少&#xff0c;即字符串长度最少而要用最少的字符&#xff0c;找出则返回的字符为二进制下的编号这样利用了所有的01字符号人表示二进制下位的情况注意对于2的次方项&#xff0c;只需要有位&#xff0c;可以用位均…...

用HTML5的<canvas>元素实现刮刮乐游戏

用HTML5的&#xff1c;canvas&#xff1e;元素实现刮刮乐游戏 用HTML5的<canvas>元素实现刮刮乐&#xff0c;要求&#xff1a;将上面的“图层”的图像可用鼠标刮去&#xff0c;露出下面的“图层”的图像。 示例从简单到复杂。 简单示例 准备两张图像&#xff0c;我这…...

TypeScript + react 中 TypeScript 的加入后 , 有哪些优化项目

在使用 TypeScript 结合 React 进行开发时&#xff0c;TypeScript 提供了许多优化和增强代码质量的方式。以下是一些关键的优化操作和最佳实践&#xff1a; 强类型组件属性&#xff08;Props&#xff09;和状态&#xff08;State&#xff09;: 使用接口或类型别名定义组件的 pr…...

Redis学习路径(构建体系)

学习路径 掌握数据类型&#xff08;分析底层数据结构&#xff09;和缓存的基本使用 (理论使用) 掌握 redis 实现高性能&#xff0c;高可靠、高可用技术 &#xff08;理论&#xff09;学习redis源代码底层实现 (底层实现) 先来一个引言&#xff0c;比较宏观的角度&#xf…...

【README 小技巧】 展示gitee中开源项目start

【README 小技巧】 展示gitee中开源项目start <a target"_blank" hrefhttps://gitee.com/wujiawei1207537021/wu-framework-parent><img srchttps://gitee.com/wujiawei1207537021/wu-framework-parent/badge/star.svg altGitee star/></a>...

tcping实用小工具

Tcping实用小工具命令详解 一、tcping介绍 tcping&#xff1a;tcping命令基于tcp协议监控&#xff0c;可以从较低级别的协议获得简单的&#xff0c;可能不可靠的数据报服务。 原则上&#xff0c;TCP应该能够在从容硬线连接到分组交换或电路交换网络的各种通信系统之上操作。 …...

【Web】Java反序列化之CC2——commons-collections4的新链之一

目录 关于commons-collections4 一个重要的思维模型 触发Transform的关键类&#xff1a;TransformingComparator 反序列化的入口&#xff1a;PriorityQueue Exp 关于commons-collections4 commons-collections4 是 Apache Commons 组件库中的一个项目&#xff0c;它是对旧…...

golang使用gorm操作mysql1

1.mysql连接配置 package daoimport ("fmt""gorm.io/driver/mysql""gorm.io/gorm""gorm.io/gorm/logger" )var DB *gorm.DB// 连接数据库&#xff0c;启动服务的时候&#xff0c;init方法就会执行 func init() {username : "roo…...

Flutter异常上报及性能监控实现

1. 页面异常监测 在Flutter中&#xff0c;通常用FlutterError监测Flutter框架抛出的异常&#xff0c;用runZonedGuarded监测应用中用户代码异常。 class AppGuarded {run(Widget app) {//1. 用FlutterError监测flutter框架抛出的异常FlutterError.onError (FlutterErrorDetail…...

基于springboot+vue的工厂车间管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…...

Java基础 - Stream 流:Stream API的终端操作

在前两篇博客中&#xff0c;我介绍了构建 Stream 流的多种方式&#xff0c;以及 Stream API 的中间操作&#xff0c;如果你还没有阅读&#xff0c;你可以点击这里和这里查看。 Java基础 - Stream 流&#xff1a;构建流的多种方式 Java基础 - Stream 流&#xff1a;Stream API…...

高级语言期末2009级A卷(计算机学院)

1.编写函数&#xff0c;打印下列序列0&#xff0c;1&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;5&#xff0c;8&#xff0c;13&#xff0c;21&#xff0c;34...(斐波那契序列)的前n项 #include <stdio.h>int main() {int x0,y1,z,n;scanf("%d",&…...

docker-compose搭建php开发环境

Docker Compose简介 Compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose&#xff0c;您可以使用 YML 文件来配置应用程序需要的所有服务。然后使用一个命令&#xff0c;就可以从 YML 文件配置中创建并启动所有服务。而DockerCompose作为一种容器编排工具&…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...