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>

效果

相关推荐
昔人'5 小时前
CSS content-visibility
前端·css
JackieDYH8 小时前
CSS滚动吸附详解:构建精准流畅的滚动体验-scroll-snap-type
前端·css
软件技术NINI8 小时前
html css js网页制作成品——敖瑞鹏html+css+js 4页附源码
javascript·css·html
馬致远9 小时前
案例1- 跳动的心
javascript·css·css3
盛夏绽放10 小时前
新手入门:实现聚焦式主题切换动效(Vue3 + Pinia + View Transitions)
前端·vue3·pinia·聚焦式主题切换
魂祈梦11 小时前
页面出现莫名其妙的滚动条
前端·css
我叫张小白。11 小时前
Vue3 组件通信:父子组件间的数据传递
前端·javascript·vue.js·前端框架·vue3
草字11 小时前
css 父节点设置display: flex; align-items: center;,子节点如何跟随其他子节点撑高的高度
前端·javascript·css
凯小默11 小时前
11-定义接口返回类型值
vue3
前端_yu小白11 小时前
websocket在vue项目和nginx中的代理配置
vue.js·websocket·nginx·vue3·服务端推送