vue-class和style樣式繫結

丶Serendipity丶發表於2021-09-05
Vue

前言

　　操作元素的 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樣式十分接近。

寫在最後

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

相關文章