Andy的前後端技術筆記、生活紀錄
在vue中把變數傳進css
發佈於: 2023-01-14 更新於: 2024-04-21 分類於: frontend

某些時候會希望動態改變css的樣式高度、寬度、顏色…等等的
在vue中可以宣告一個ref變數(composition API),然後把搭丟到vue檔案中的

中,又或者透過inline的方式直接插入到html tag中,舉例如下:

1
2
3
4
setup(){
const mdSize = ref("100px");

}

傳到 <style>

1
2
3
4
5
6
<div class="md-size"></div> //在這裏class不需要v-bind
<style>
.md-size{
height:v-bind(mdSize);
}
</style>

以傳值的方式丟到inline

搭配v-bind 也就是縮寫 “:”
把mdSize放進去style

1
<button :style="{ height: mdSize }" > 按鈕名稱 </button>
--- 到底拉 The End ---