vue--class和style樣式綁定

前言

　　操作元素的 class 樣式列表和 style 內聯樣式為數據綁定是前端開發中一個常見的需求，這些樣式都屬於元素的屬性 attribute ，因此我們可以通過 v-bind 來動態綁定元素的樣式屬性。本文來總結一下這兩個屬性相關的知識點，便於日后的復習學習。

正文

　　1.class的動態綁定

　　（1）對象語法，即class動態綁定一個對象。

   <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
    </style>
    <div id="app">
        <!-- 綁定html clas樣式 -->
        <div :class="{red:isRed,green:isGreen}">對象語法1</div>
        <div :class="classObj1">對象語法2</div>
        <div :class="classObj2">對象語法3</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    isRed: true,
                    isGreen: false,
                    classObj1: {
                        red: true,
                        green: false,
                    },
                }
            },
            computed: {
                classObj2() {
                    return {
                        red: true,
                        green: false,
                    }
                },
            },
        })
    </script>

　　運行結果如下：

　　對於對象語法1：class 綁定一個字面量類型的對象值，其中 red 屬性值為 true，green 屬性值為 false ，最終結果為綁定了red類選擇器的樣式。

　　對於對象語法2和語法3：class 綁定一個對象的名，並非具體的對象的值，該鍵名對應了具體的對象value值，該對象的 red 屬性為true，green屬性為false，最終結果為綁定了red類型選擇器的樣式，語法2和語法3的區別在於對象的聲明在計算屬性還是data中。

　　（2）數組語法，即class動態綁定一個數組類型

   <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
    </style>
    <div id="app">
        <!-- 綁定html clas樣式 -->
        <div :class="[classRed,classGreen]">數組語法1</div>
        <div :class="[isRed?'red':'']">數組語法2</div>
        <div :class="classArr">數組語法3</div>
        <div :class="[{red:isRed},classGreen]">數組中對象混合用法</div>
    </div>
     <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    isRed: true,
                    isGreen: false,
                    classRed: "red",
                    classGreen: "green",
                    classArr:["red","green"],
                }
            }
        })

    </script>

　　運行結果如下：

　　對於數組語法1：class綁定一個數組值，其中數組中的元素代表每一個類選擇器的樣式，最終綁定結果為red和green選擇器的樣式，當color樣式重復，頁面渲染后面的樣式，顏色為綠色。

　　對於數組語法2：class綁定一個數組值，只有一個元素，第一個元素由條件表達式確定。樣式渲染如上。

　　對於數組語法3：class綁定一個數組名，並非具體的數組值，該名對應了具體的數組 value 值。

　　對於數組語法4：class綁定一個數組，數組中第一個元素為一個對象，不難理解。

　　（3）代碼中常用的樣式綁定

    <style>
        .red {
            color: red;
        }
    </style>
     <div id="app">
        <div :class="isRed?'red':''">代碼中常用class綁定</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    isRed: true,
                }
            }
        })
    </script>

　　運行結果如下：

　　2.style的動態綁定

    <div id="app">
        <!-- 綁定內聯樣式 -->
        <div :style="{color:styleRed}">對象語法1</div>
        <div :style="styleObj1">對象語法2</div>
        <div :style="styleObj2">對象語法3</div>
        <div :style="[styleObj1]">數組語法</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    styleRed: "red",
                    styleObj1: {
                        color: "red"
                    }
                }
            },
            computed: {
                styleObj2() {
                    return {
                        color: "red"
                    }
                }
            },
        })
    </script>

　　運行結果如下：

　　style動態綁定樣式，不需要再style標簽中添加對應的類選擇器，和原生js修改css樣式十分接近。

寫在最后

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。