2023鐵人賽＿Vue2基本使用規則(Day8)-綁定樣式

2023 iThome 鐵人賽

DAY 8

自我挑戰組

Vue2 初步認識以及基本使用規則 && 了解 Vue2 的基本原理系列第 8 篇

15th鐵人賽 vue2 樣式綁定

yuchen1226

團隊大壯們的首次鐵人賽

2023-09-08 01:42:25

494 瀏覽

分享至

在網頁中,常常會使用到需要不同設計的class讓畫面有明顯的動態效果
在Vue中也可以在data的配置中一組數據收集css的樣式
再綁定在class上

CLASS樣式綁定

在編嵌上的使用會以
:class="xxx"
的方式呈現

以下套用bootstrape的樣式做說明

<div id="root">
    <button :class="color">按鈕</button>
</div>

<script>
    var vm = new Vue({
        el : "#root",
        data : {
            color : "btn btn-info m-2",
        }
    })
</script>

在data中的數據配置上多個樣式
再結合事件綁定
可以達成類似變換顏色的效果

類名不確定, 需要動態指定

<div id="root">
    <button :class="color" @click="change" >按鈕</button>
</div>
<script>
    var vm = new Vue({
        el : "#root",
        data : {
            good : "btn btn-info m-2",
            warn : "btn btn-danger m-2",
            color : "btn btn-info m-2"
        },
        methods : {
            change(){
                if (this.color == this.good) {
                    this.color = this.warn
                } else {
                    this.color = this.good
                }
            }
        }
    })
</script>

也可以配置陣列讓css的樣式有彈性做添加或是刪減
綁定個數不確定

<body>
<div id="root">
    <button :class="color" @click="change" >按鈕</button>
</div>

<script>
    var vm = new Vue({
        el : "#root",
        data : {
            colorArr : ["btn btn-info m-2","btn btn-danger m-2","btn btn-dark m-2"],
            color : "btn btn-info m-2"
        },
        methods : {
            change(){
                // 顏色隨機
                let i = Math.floor(Math.random()*3);
                this.color = this.colorArr[i];
            }
        }
    })
</script>

除此之外
也能將color配置一個對象
個數、名稱確定, 但要動態決定要不要用

<div id="root">
    <button :class="style" >按鈕</button>
</div>
<script>
    var vm = new Vue({
        el : "#root",
        data : {
            style : {
                "btn" : true,
                "btn-info" : true,
                "btn-lg" : true,
                "m-2" : true 
            }
        }
    })
</script>

針對class的配置上可以依照需求判斷使用哪種方式運用

STYLE樣式綁定

在某些時刻,針對css沒有配置到的class
對像我這樣的後端工程師要刻畫面的時候就有可能使用到style來調整畫面的間距、寬度等等

那在針對style要使用到data的配置時
:style="xxx"
可以綁定data中的數據

<div id="root">
    <p :style="classObj" >style樣式</p>
</div>
<script>
    var vm = new Vue({
        el : "#root",
        data : {
            classObj : {
                fontSize : "30px",
                color : "red",
            }
        }
    })
</script>

對於style而言,配置為對象式可以有效閱讀前端樣式
一般在撰寫html的時候,style的使用常常會讓程式碼太長
上面的做法可以有效閱讀,還可以有復用的優勢

配置為陣列也能達到效果

<div id="root">
    <p :style="classArr" >style樣式</p>
</div>
<script>
    var vm = new Vue({
        el : "#root",
        data : {
            classArr : [{fontSize : "30px",},{color : "red",}]
        }
    })
</script>