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>

效果

相关推荐
jnene4 小时前
html 时间、价格筛选样式处理
前端·css·html
用户059540174467 小时前
Redis 缓存过期不一致踩坑实录:一个 bug 让我排查了 3 小时,最终用 Pytest 自动化堵上漏洞
前端·css
神明不懂浪漫8 小时前
【第三章】CSS(一)——基础选择器、CSS的属性
前端·css·html·css3
用户059540174468 小时前
localStorage清除策略踩坑实录:一个过期的token让我排查了3小时
前端·css
#麻辣小龙虾#10 小时前
js实现视频播放画中画模式
javascript·css·音视频
低保和光头哪个先来11 小时前
聊聊 CSS 编译和 scoped 实现
前端·css·vue.js
在逃花果山的小松1 天前
CSS 调试头大报错难查?ChatGPT 一键定位样式问题并给出修复方案
css
编程技术手记1 天前
Vue Scoped CSS 与动态创建 DOM 的兼容性问题
前端·css·vue.js
用户059540174461 天前
LangChain 记忆模块踩坑实录:靠自动化测试,我把上下文丢失率从 30% 降到 0
前端·css
雨翼轻尘1 天前
03_HTML进阶标签与CSS入门
前端·css·html·入门·进阶标签