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>

效果

相关推荐
ヤ鬧鬧o.18 小时前
多彩背景切换演示
前端·css·html·html5
这儿有一堆花21 小时前
CSS 拟真光影设计:从扁平到深度的技术复盘
前端·css
_OP_CHEN1 天前
【前端开发之CSS】(三)CSS 常用元素属性宝典(上):从字体到文本,手把手教你打造高颜值网页!
前端·css·html·网页开发·文本属性·字体属性·页面美化
朝阳391 天前
CSS-in-JS(含样式化组件 styled-components)
css
小圣贤君1 天前
在 Electron 应用中优雅接入 DeepSeek AI:从零到一的完整实践指南
人工智能·electron·vue3·ai写作·deepseek
ヤ鬧鬧o.1 天前
HTML多倒计时管理
前端·javascript·css·html5
码上出彩1 天前
H5+CSS3响应式设计实战:基于Flex布局的适配方案
前端·css·css3
倪枫1 天前
CSS3——文本样式(字体样式和文本布局)
前端·css·css3
木斯佳1 天前
周末杂谈:Chrome CSS 2025-声明式Web的革命之年
前端·css·chrome
朝阳391 天前
CSS【模块】CSS Modules
css