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>

效果

相关推荐
用户059540174466 小时前
把 AI 长期记忆去重测试从 20 分钟压到 40 秒,重复率从 18% 干到 1.5%
前端·css
码艺-Alimjan11 小时前
横向滚动组件纯用 CSS,丝滑鼠标滚动不许js
javascript·css·计算机外设
砚凝霜14 小时前
软考网络工程师|案例分析:Eth‑Trunk 链路聚合、iStack 堆叠、CSS 集群核心考点总结
前端·css·网络
rockey6271 天前
C#脚本引擎之AScript与Flee对比
c#·.net·script·eval·动态脚本
盛夏绽放2 天前
Proxy与Reflect详解(二):进阶篇——手写Vue3响应式系统
ui·vue3·proxy
breeze jiang2 天前
CSS 三栏布局怎么写:Flex、Grid 完整方案与 BFC 区别
前端·css
何时梦醒2 天前
CSS 三栏布局与 BFC 深度解析:Float、Flex、Grid 三种方案一网打尽
前端·css·面试
烬羽2 天前
CSS 三栏布局:`margin-left: -100%` 凭什么把侧栏「拽」回上一行?彻底搞懂负 margin
css·面试·前端框架
BreezeJiang2 天前
写了 display:flex,为什么三栏布局还没完成?
前端·css
RuoyiOffice2 天前
抓包还能看到密码?Vue3 + Spring Boot 3 接口 AES/RSA 加解密(@ApiEncrypt)全链路实战
spring boot·vue3·aes·rsa·接口安全·spring boot 3·apiencrypt