亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3如何在SCSS中使用v-bind

 更新時間：2024年03月02日 14:59:39   作者：huanglihui1007  
這篇文章主要介紹了Vue3如何在SCSS中使用v-bind,通過template先創(chuàng)建一個通用的頁面結(jié)構(gòu),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

template

先創(chuàng)建一個通用的頁面結(jié)構(gòu)

<template>
  <div class="v-bubble-bg"></div>
</template>

js

在JS中先對需要用的數(shù)據(jù)進(jìn)行定義：
可以是參數(shù)，也可以是data

<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

<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>

運(yùn)行結(jié)果

image.png

到此這篇關(guān)于Vue3 在SCSS中使用v-bind的文章就介紹到這了,更多相關(guān)Vue3使用v-bind內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論