vue3中css使用script中定义的变量

代码

javascript 复制代码
<template>
  <div class="box">haha</div>
</template>

<script setup lang="ts">
const boxWidth = '500px'
</script>

<style lang="scss">
.box {
  width: v-bind(boxWidth);
  height: 200px;
  background-color: red;
}
</style>

效果

相关推荐
lastknight15 小时前
CSS @layer
前端·css
万亿少女的梦16817 小时前
基于微信小程序、Spring Boot与Vue3的智慧养老管理系统设计与实现
spring boot·redis·微信小程序·mybatis·vue3
用户0595401744620 小时前
用 Pytest 接管大模型记忆存储测试,状态一致性问题减少 90%
前端·css
gis开发之家2 天前
《Vue3 从入门到大神33篇》Vue3 源码详解(三):响应式核心思想——从 Object.defineProperty 到 Proxy
前端·javascript·vue.js·vue3·vue3源码
rockey6272 天前
基于AScript的JavaScript脚本语言发布啦
javascript·c#·.net·js·script
甜味弥漫3 天前
一文搞懂 Flex 弹性布局:为什么它成为现代 CSS 布局的首选?
css
用户059540174463 天前
AI记忆存储一致性踩坑实录:每天手工回归200条对话,直到我用pytest+Redis搭建自动化验证
前端·css
gis开发之家3 天前
《Vue3 从入门到大神32篇》Vue3 源码详解(二):从 GitHub Clone 到断点调试,手把手搭建源码阅读环境
vue.js·前端框架·github·vue3·vue3源码
gis开发之家4 天前
vue3直击架构痛点 依赖倒置与接口隔离——打造坚如磐石的插件与高阶组件(HOC)模式
javascript·架构·typescript·前端框架·vue3
思码梁田4 天前
CSS letter-spacing 属性详解:掌控字符之间的呼吸感
前端·css