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>

效果

相关推荐
syt_101332 分钟前
grid应用之响应式布局
前端·javascript·css
tj2 小时前
CSS属性:background-position
css
Irene19912 小时前
CSS Animation 详解
css·动画
syt_10133 小时前
gird布局之九宫格布局
前端·javascript·css
苏打水com4 小时前
Day4-6 CSS 进阶 + JS 基础 —— 实现 “交互效果 + 样式复用”(对标职场 “组件化思维” 入门)
javascript·css·交互
苏打水com4 小时前
Day1-3 夯实基础:HTML 语义化 + CSS 布局实战(对标职场 “页面结构搭建” 核心需求)
前端·css·html·js
苏打水com5 小时前
第三篇:Day7-9 响应式布局+JS DOM进阶——实现“多端兼容+动态数据渲染”(对标职场“移动端适配”核心需求)
前端·css·html·js
凯小默15 小时前
13-实现首页的基础结构
vue3
GDAL20 小时前
CSS重置样式表(Reset CSS
前端·css
我叫张小白。21 小时前
Vue3 插槽:组件内容分发的灵活机制
前端·javascript·vue.js·前端框架·vue3