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>

效果

相关推荐
Z兽兽1 小时前
行内块元素在垂直方向上对齐问题
css·html·css3
小幸运2483 小时前
Vue.js 在博客平台中为何采用响应式系统而非直接操作
css
dsyuan0015 小时前
基于 Vue3 + ElementPlus 极简搭建仿钉钉流程设计器,简洁架构、极易扩展,纯div+css布局
css·架构·钉钉
bjzhang756 小时前
使用HTML+CSS美化上传进度条展示
前端·css·html
YWL6 小时前
CSS变量与预处理器
前端·css
吴长建先生重名了1 天前
用 MinIO 分布式存储模块一次讲清代码重构与整洁代码实
css
cindershade1 天前
把响应式做成可验证的状态切换:Container Queries 的组件级重构方法
css·flexbox·前端工程化
我就是DaLing呀!1 天前
vue3 + 独立的数据管理 Store实现视频剪辑功能
前端·typescript·vue3·canvas·store
平头哥~1 天前
Day 15 | 不改一行 HTML,给页面加上引号、角标和标签
前端·javascript·css·html·css3·学习资料
平头哥~2 天前
Day 07 _ 那条 1px 的线,为什么在手机上忽粗忽细
前端·css·样式·学习资料