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>

效果

相关推荐
王莎莎-MinerU9 小时前
MinerU 深度技术解析:从架构原理到生产部署的全面指南
css·人工智能·自然语言处理·架构·ocr·个人开发
之歆9 小时前
Day19_LESS 完全指南——从入门到工程实践
前端·css·less
ZC跨境爬虫17 小时前
跟着 MDN 学CSS day_25:(高级区块效果)
前端·css·html·tensorflow·媒体
暗冰ཏོ19 小时前
《2026 Vue2 + Vue3 完整学习指南:基础语法、路由缓存、登录拦截、项目实战与面试题》
前端·vue.js·vue·vue3·vue2
蜡台19 小时前
VUE 侧边按钮组,可自定义位置
前端·javascript·css
之歆21 小时前
Day22_CSS 函数完全指南:从变量到数学计算的现代样式编程
开发语言·前端·javascript·css·tensorflow·less
之歆1 天前
Day20_PC 端电商商品详情页前端实战:从布局到放大镜与选项卡
开发语言·前端·javascript·css·less
夜雪闻竹1 天前
Tailwind CSS v4 + Vite:现代前端样式方案
前端·css·ai
ZC跨境爬虫1 天前
跟着 MDN 学CSS day_27:(处理不同方向的文本)
前端·javascript·css·ui·html
巴巴博一1 天前
【AI 赋能前端】告别手写样式!ui-ux-pro-max-skill 插件完整使用指南(附高阶 Prompt 模板)
前端·css·人工智能·ui