Vue3 在SCSS中使用v-bind

template

先创建一个通用的页面结构

js 复制代码
<template>
  <div class="v-bubble-bg"></div>
</template>

js

在JS中先对需要用的数据进行定义:

可以是参数,也可以是data

js 复制代码
<script setup>
    const props = defineProps({
    bgColor: {
      type: String,
      default: '#000000'
    },
    bgWidth: {
      type: [Number, String],
      default: '100%'
    },
    bgHeight: {
      type: [Number, String],
      default: '100%'
    },
    color: {
      type: String,
      default: 'rgba(255,255,255,.6)'
    }
  })
  const pdata = reactive({
    size: '12px'
  })
</script>

css

js 复制代码
<style lang="scss" scoped>
 .v-bubble-bg {
    background-color: v-bind(bgColor);
    width: v-bind(bgWidth);
    height: v-bind(bgHeight);
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    font-size:v-bind('pdata.size')
 }
</style>

运行结果

运行结果

相关推荐
初遇你时动了情16 分钟前
uniapp 城市选择插件
开发语言·javascript·uni-app
zhangjr05751 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
不爱学习的YY酱1 小时前
【操作系统不挂科】<CPU调度(13)>选择题(带答案与解析)
java·linux·前端·算法·操作系统
zongzi_4941 小时前
二次封装的天气时间日历选择组件
开发语言·javascript·ecmascript
木子七1 小时前
vue2-vuex
前端·vue
麻辣_水煮鱼1 小时前
vue数据变化但页面不变
前端·javascript·vue.js
BY—-组态1 小时前
web组态软件
前端·物联网·工业互联网·web组态·组态
一条晒干的咸魚2 小时前
【Web前端】实现基于 Promise 的 API:alarm API
开发语言·前端·javascript·api·promise
WilliamLuo2 小时前
MP4结构初识-第一篇
前端·javascript·音视频开发
Beekeeper&&P...2 小时前
web钩子什么意思
前端·网络