Vue3如何在SCSS中使用v-bind
更新時(shí)間：2024年03月02日 14:59:39 作者：huanglihui1007
這篇文章主要介紹了Vue3如何在SCSS中使用v-bind,通過(guò)template先創(chuàng)建一個(gè)通用的頁(yè)面結(jié)構(gòu),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
template
先創(chuàng)建一個(gè)通用的頁(yè)面結(jié)構(gòu)
<template> <div class="v-bubble-bg"></div> </template>
js
在JS中先對(duì)需要用的數(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue父子組件通信的高級(jí)用法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家詳細(xì)介紹了vue中封裝組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),對(duì)我們深入了解vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
這篇文章主要介紹了在Vue中使用WebScoket，網(wǎng)絡(luò)的不穩(wěn)定而斷開(kāi)連接，webscoket不會(huì)出現(xiàn)異常，下面就一起進(jìn)入文章看看吧2022-01-01
<el-button>點(diǎn)擊后如何跳轉(zhuǎn)指定url鏈接
這篇文章主要介紹了<el-button>點(diǎn)擊后如何跳轉(zhuǎn)指定url鏈接問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了Vue 重置組件到初始狀態(tài)的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
詳解vue3?響應(yīng)式的實(shí)現(xiàn)原理
Vue.js?3.0?為了解決?Object.defineProperty?的這些缺陷，使用?Proxy?API?重寫了響應(yīng)式部分，并獨(dú)立維護(hù)和發(fā)布整個(gè)?reactivity?庫(kù)，這篇文章主要介紹了vue3?響應(yīng)式的實(shí)現(xiàn)原理,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue在組件中使用v-model的場(chǎng)景，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了antd多選下拉框一行展示的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
本文詳細(xì)介紹了從vue的組件傳值著手觀察者模式，感興趣的同學(xué)，可以參考下，理解其原理。2021-06-06