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>

效果

相关推荐
WZl5 小时前
在传统的HTML、CSS与JavaScript项目中加入vue
javascript·css·vue.js·html
无·糖5 小时前
大学生HTML期末大作业——HTML+CSS+JavaScript人物明星(周杰伦)
javascript·css·html·课程设计·大学生·大作业·web网页设计作业
parade岁月6 小时前
理解 CSS backface-visibility:卡片翻转效果背后的属性
前端·css
QianhangQianping8 小时前
前端技术迭代深析:从 CSS 布局到状态管理的进化之路
前端·css
k***21609 小时前
【HTML+CSS】使用HTML与后端技术连接数据库
css·数据库·html
初遇你时动了情9 小时前
vue3 ts uniapp基本组件封装、通用组件库myCompont、瀑布流组件、城市选择组件、自定义导航栏、自定义底部菜单组件等
typescript·uni-app·vue3
ycgg9 小时前
别再只用 --xxx!CSS @property 解锁自定义属性的「高级玩法」
前端·css
我叫张小白。9 小时前
Vue3 标签的 ref 属性:直接访问 DOM 和组件实例
前端·javascript·vue.js·typescript·vue3
软件技术NINI10 小时前
html css js网页制作成品——鹿晗html+css+js 4页附源码
javascript·css·html
Z_Wonderful10 小时前
主题切换(1):css变量的使用(:root)
前端·javascript·css