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>

效果

相关推荐
DarkBule_30 分钟前
零基础驯服GitHub Pages
css·学习·html·github·html5·web
sen_shan37 分钟前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
晓风伴月1 小时前
Css:overflow: hidden截断条件‌及如何避免截断
前端·css·overflow截断条件
爱泡脚的鸡腿1 小时前
HTML CSS 第二次笔记
前端·css
前端Hardy2 小时前
HTML&CSS:超好看的轮播图,你绝对用得上(建议收藏)
javascript·css·html
前端Hardy2 小时前
HTML&CSS:必学!手把手教你实现动态天气图标
javascript·css·html
CodePencil5 小时前
CSS专题之继承
前端·css
路光.6 小时前
Vue3实现锚点定位
前端·javascript·vue.js·vue3
1024小神7 小时前
vscode/cursor编辑器中vue3文件里面的css不能注释解决办法
css·vscode·编辑器
晓风伴月9 小时前
Css:如何解决绝对定位子元素内容被父级元素overflow:hidden属性剪裁
前端·css·overflow裁剪