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>

效果

相关推荐
思码梁田1 小时前
CSS 定位详解:从相对到固定,掌握网页布局的核心
前端·javascript·css
muddjsv1 小时前
CSS 高级选择器精讲:伪类、伪元素、逻辑伪类与选择器解耦规范
前端·css
用户446846004802 小时前
C 语言分支与循环语句总结
css
寒水馨3 小时前
macOS下载、安装 Tailwind CSS-v4.3.3(附安装包tailwindcss-macos-arm64)
前端·css·macos·tailwind css·utility-first·css 框架·实用优先
朕的剑还未配妥21 小时前
CSS 实现渐变毛玻璃:从 backdrop-filter 到多层 mask
前端·css
想你依然心痛1 天前
让数据会说话,Vue 结合 ECharts 打造电力可视化大屏
echarts·vue3·数据大屏·电力可视化
nicole bai2 天前
手写tab选中
前端·javascript·css
用户059540174462 天前
用了3年Redis,才发现我一直没搞懂缓存一致性测试
前端·css
muddjsv2 天前
CSS选择器体系精讲:按身份、结构、状态精准匹配元素(零基础吃透)
前端·css
路光.2 天前
Vue2升级Vue3处理原 UMD/CommonJS 打包文件,不是标准 ESM
前端·javascript·vue.js·vue3