Vue3如何在SCSS中使用v-bind
更新時(shí)間：2024年03月02日 14:59:39 作者：huanglihui1007
這篇文章主要介紹了Vue3如何在SCSS中使用v-bind,通過template先創(chuàng)建一個(gè)通用的頁面結(jié)構(gòu),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
template
先創(chuàng)建一個(gè)通用的頁面結(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é)果
到此這篇關(guān)于Vue3 在SCSS中使用v-bind的文章就介紹到這了,更多相關(guān)Vue3使用v-bind內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 使用插槽分發(fā)內(nèi)容操作示例【單個(gè)插槽、具名插槽、作用域插槽】
這篇文章主要介紹了vue 使用插槽分發(fā)內(nèi)容操作,結(jié)合實(shí)例形式總結(jié)分析了vue.js使用單個(gè)插槽、具名插槽、作用域插槽相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-03-03
vue實(shí)現(xiàn)點(diǎn)擊復(fù)制到粘貼板
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)點(diǎn)擊復(fù)制到粘貼板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
本文詳細(xì)介紹了如何在Vue3項(xiàng)目中集成Electron,包括安裝electron和electron-builder兩個(gè)依賴,以及配置.npmrc文件和手動修改鏡像源的方法,整個(gè)過程詳細(xì)記錄了從創(chuàng)建項(xiàng)目、安裝依賴、修改配置、到最終打包部署的每一步2024-10-10
今天小編就為大家分享一篇vue設(shè)置動態(tài)請求地址的例子，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue 實(shí)現(xiàn)axios攔截、頁面跳轉(zhuǎn)和token 驗(yàn)證
這篇文章主要介紹了vue 實(shí)現(xiàn)axios攔截、頁面跳轉(zhuǎn)和token 驗(yàn)證，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Vue.js 中的 v-cloak 指令及使用詳解，通過案例給大家簡單介紹了vue中v-cloak的使用，感興趣的朋友跟隨小編一起看看吧2018-11-11
最近在vue中安裝Three.js,無聊順便研究一些關(guān)于3D圖形化庫,下面這篇文章主要給大家介紹了關(guān)于vue+threejs寫物體動畫之物體縮放動畫效果的相關(guān)資料,需要的朋友可以參考下2022-10-10
vue+element-ui集成隨機(jī)驗(yàn)證碼+用戶名+密碼的form表單驗(yàn)證功能
在登入頁面，我們往往需要通過輸入驗(yàn)證碼才能進(jìn)行登入，那我們下面就詳講一下在vue項(xiàng)目中如何配合element-ui實(shí)現(xiàn)這個(gè)功能,需要的朋友可以參考下2018-08-08
vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能
這篇文章主要介紹了vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
vue axios重復(fù)點(diǎn)擊取消上一次請求封裝的方法
這篇文章主要介紹了vue axios重復(fù)點(diǎn)擊取消上一次請求封裝的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06