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>

效果

相关推荐
rockey6275 小时前
AScript异步执行与await关键字
c#·.net·script·eval·expression·异步执行·动态脚本
JYeontu6 小时前
轮播图不够惊艳?试下这个立体卡片轮播图
前端·javascript·css
软件技术NINI12 小时前
泉州html+css 4页
前端·javascript·css·html
ZC跨境爬虫15 小时前
跟着 MDN 学CSS day_2:(连接样式表与选择器的实战艺术)
java·前端·css·ui·html·媒体
ZC跨境爬虫15 小时前
跟着 MDN 学CSS day_1:(CSS 基石与色彩的艺术)
前端·javascript·css·ui·html
艾伦野鸽ggg16 小时前
CSS 滤镜与动态特性知识梳理
前端·css
小杍随笔17 小时前
【Rust + Tauri 2 + TypeScript + Tailwind CSS 4 桌面应用 UI 组件选型深度对比(2026版)】
css·rust·typescript
希冀12317 小时前
【CSS学习第十篇】
前端·css
biubiubiu_LYQ1 天前
萌新小白基础篇之CSS定位布局(干货满满)!
css
暗冰ཏོ1 天前
CSS 超详细讲解(从基础到高级实战)
前端·css·css3·sass·scss