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>

效果

相关推荐
ZC跨境爬虫13 小时前
跟着 MDN 学CSS day_21:(图像溢出控制与表单元素样式定制)
前端·javascript·css·ui·交互
暗冰ཏོ15 小时前
2026前端开发资源整理大全:从基础学习到工程化实战的完整导航
前端·javascript·css·前端框架·html
曲幽15 小时前
写页面时别再把 Element Plus 整个搬进来啦!Vue3按需加载的坑我帮你踩平了
vue3·web·vite·icon·element plus·vs code·import·unplugin
dsyyyyy110117 小时前
CSS继承性
前端·css·tensorflow
ZC跨境爬虫20 小时前
跟着 MDN 学CSS day_23:(表单与表格综合样式化实战)
前端·javascript·css·ui·html·tensorflow
ZC跨境爬虫1 天前
跟着 MDN 学CSS day_16:(深入掌握背景与边框的艺术)
前端·css·ui·html·tensorflow
淼淼爱喝水2 天前
Ansible 入门实战:四种变量优先级比较实验
ansible·变量
小云小白2 天前
若依-vue3 把深色版本改成天蓝色-含登录页
vue3·若依·天蓝色
之歆2 天前
Day18_JavaScript高级核心:原型链、继承与事件循环机制深度解析(下)
前端·javascript·css
边界条件╝2 天前
CSS3 高阶使用技巧实战
前端·css·css3