SFC CSS 功能:深层选择/插槽选择器/动态绑定

深层选择器

如果您希望样式中的选择器scoped"深入",即影响子组件,则可以使用:deep()伪类:

github-dark 复制代码
<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

以上内容将被编译为:

github-dark 复制代码
.a[data-v-f3f3eg9] .b {
  /* ... */
}

提示

创建的 DOM 内容v-html不受范围样式的影响,但您仍然可以使用深度选择器来设置它们的样式。

插槽选择器

默认情况下,范围样式不会影响 渲染的内容<slot/>,因为它们被视为传入它们的父组件所拥有。要明确定位插槽内容,请使用:slotted伪类:

css 复制代码
<style scoped>
:slotted(div) {
  color: red;
}
</style>

v-bind()在 CSS 中

SFC<style>标签支持使用 CSS 函数将 CSS 值链接到动态组件状态v-bind

css 复制代码
<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

该语法适用于<script setup>,并支持 JavaScript 表达式(必须用引号引起来):

css 复制代码
<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

实际值将被编译为散列 CSS 自定义属性,因此 CSS 仍然是静态的。自定义属性将通过内联样式应用于组件的根元素,并在源值发生变化时进行响应式更新。

相关推荐
世伟爱吗喽3 分钟前
threejs入门学习日记
前端·javascript·three.js
朝阳58116 分钟前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo17 分钟前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~36 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼40 分钟前
leetcode常用解题方案总结
前端·算法·leetcode
惜.己1 小时前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户21411832636022 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc2 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|2 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js