詳解Vue.js Class與Style綁定

Posted on by

Vue.js Class與Style綁定

對於數據綁定，一個常見的需求是操作元素的class列表和它的內聯樣式。因為它們都是attribute，我們可以用v-bind處理它們；隻需要計算出表達式最終的字符串。不過，字符串拼接麻煩又易錯。因此，在v-bind用於class和style時，Vue.js專門增強瞭它。表達式的結果類型除瞭字符串以外，還可以是對象或數組。

綁定HTML Class

對象語法

我們可以傳給v-bind:class一個對象，以動態地切換class。註意，v-bind:class指令可以與普通的class特性共存。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example" class="static" :class=" {'didi-orange': isRipe,'didi-green': isNotRipe}"></div>
</body>
<script>
    new Vue({
        el: '#example',
        data: {
            isRipe: true,
            isNotRipe: false
        }
    })
</script>
</html>

在這裡插入圖片描述

當isRipe和isNotRipe變化時，class列表將相應地更新。例如，如果isNotRipe變為true，那麼class列表將變為“static didi-orange didi-green”。

註：盡管可以用Mustache標簽綁定class，比如class="{{className}}"，但是我們不推薦這種寫法和v-bind:class混用。
我們也可以直接綁定數據中的一個對象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example" :class="ddfe"></div>
</body>
<script>
    new Vue({
        el: '#example',
        data: {
            ddfe: {
                isRipe: true,
                isNotRipe: false
            }
        }
    })
</script>
</html>

在這裡插入圖片描述

還可以在這裡綁定一個返回對象的計算屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example" :class="ddfe"></div>
</body>
<script>
    new Vue({
        el: '#example',
        data: {
            didiAge: 4,
            didiMember: 6000
        },
        computed: {
            ddfe: function () {
                return {
                    'didi-orange': this.didiAge > 3,
                    'didi-large': this.didiMember > 1000
                }
            }
        }
    })
</script>
</html>

在這裡插入圖片描述

數組語法

我們可以把一個數組傳給v-bind:class，以應用一個class列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example" :class="[didiHandsome,didiBeautful]"></div>
</body>
<script>
    new Vue({
        el: '#example',
        data: {
            didiHandsome: 'didiHandsome',
            didiBeautful: 'didiBeautful'
        }
    })
</script>
</html>

在這裡插入圖片描述

綁定內聯樣式

對象語法

v-bind:style的對象語法十分直觀——看著非常像CSS，其實它是一個JavaScript對象。CSS屬性名可以用駝峰式或短橫分隔命名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example" :style="{ color: didiColor, fontSize: fontSize + 'px' }"></div>
</body>
<script>
    new Vue({
        el: '#example',
        data: {
            didiColor: 'orange',
            fontSize: 30
        }
    })
</script>
</html>

在這裡插入圖片描述

通常直接綁定到一個樣式對象更好，讓模板更清晰。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example" :style="ddfe"></div>
</body>
<script>
    new Vue({
        el: '#example',
        data: {
            ddfe: {
                color: 'orange',
                fontSize: '13px'
            }
        }
    })
</script>
</html>

在這裡插入圖片描述

同樣的，對象語法常常結合返回對象的計算屬性使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example" :style="ddfe"></div>
</body>
<script>
    new Vue({
        el: '#example',
        data: {
            didiAge: 4,
            didiMember: 6000
        },
        computed: {
            ddfe: function () {
                return {
                    color: this.didiAge>3 ? 'orange': 'green',
                    fontSize: this.didiMember>1000 ? '20px': '10px'
                }
            }
        }
    })
</script>
</html>

在這裡插入圖片描述

數組語法

v-bind:style的數組語法可以將多個樣式對象應用到一個元素上。

<div id="example" :style="[ ddfe, didiFamily]"></div>

自動添加前綴

當 v-bind:style 使用需要添加瀏覽器引擎前綴的 CSS property 時，如 transform，Vue.js 會自動偵測並添加相應的前綴。

主流瀏覽器引擎前綴:

  • webkit（谷歌，Safari，新版Opera瀏覽器，以及幾乎所有iOS系統中的瀏覽器（包括 iOS 系統中的火狐瀏覽器）；基本上所有基於WebKit 內核的瀏覽器）
  • moz（火狐瀏覽器）
  • o（舊版Opera瀏覽器）
  • ms（IE瀏覽器 和 Edge瀏覽器）

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：