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>

效果

相关推荐
rockey6273 小时前
C#脚本引擎之AScript与Flee对比
c#·.net·script·eval·动态脚本
盛夏绽放12 小时前
Proxy与Reflect详解(二):进阶篇——手写Vue3响应式系统
ui·vue3·proxy
breeze jiang14 小时前
CSS 三栏布局怎么写:Flex、Grid 完整方案与 BFC 区别
前端·css
何时梦醒14 小时前
CSS 三栏布局与 BFC 深度解析:Float、Flex、Grid 三种方案一网打尽
前端·css·面试
烬羽14 小时前
CSS 三栏布局:`margin-left: -100%` 凭什么把侧栏「拽」回上一行?彻底搞懂负 margin
css·面试·前端框架
BreezeJiang14 小时前
写了 display:flex,为什么三栏布局还没完成?
前端·css
RuoyiOffice15 小时前
抓包还能看到密码?Vue3 + Spring Boot 3 接口 AES/RSA 加解密(@ApiEncrypt)全链路实战
spring boot·vue3·aes·rsa·接口安全·spring boot 3·apiencrypt
用户938515635071 天前
TypeScript 高级类型 + CSS 三列布局:从类型体操到样式工程的进阶之路
css·面试·typescript
莫问ABC2 天前
HTML、CSS、JavaScript 前端三件套
前端·css·html
fangzhanpeng1682 天前
(前端)5.盒子模型的宽高和边距
前端·javascript·css