詳解Vue.js Class與Style綁定

更新時間：2022年01月13日 15:59:42 作者：shi_zi_183

這篇文章主要為大家介紹了Vue.js Class與Style綁定的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

Vue.js Class與Style綁定

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

綁定HTML Class

對象語法

我們可以傳給v-bind:class一個對象，以動態(tài)地切換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變?yōu)閠rue，那么class列表將變?yōu)?ldquo;static didi-orange didi-green”。

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

<!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>

在這里插入圖片描述

數(shù)組語法

我們可以把一個數(shù)組傳給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>

在這里插入圖片描述

綁定內(nèi)聯(lián)樣式

對象語法

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>

在這里插入圖片描述

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

<!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>

在這里插入圖片描述

數(shù)組語法

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

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

自動添加前綴

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

主流瀏覽器引擎前綴:

webkit（谷歌，Safari，新版Opera瀏覽器，以及幾乎所有iOS系統(tǒng)中的瀏覽器（包括 iOS 系統(tǒng)中的火狐瀏覽器）；基本上所有基于WebKit 內(nèi)核的瀏覽器）
moz（火狐瀏覽器）
o（舊版Opera瀏覽器）
ms（IE瀏覽器和 Edge瀏覽器）