vue學(xué)習(xí)筆記(三)class和style綁定

前言

通過(guò)上一章的學(xué)習(xí)vue學(xué)習(xí)筆記(二)vue的生命周期和鉤子函數(shù)，我們已經(jīng)更近一步的知道了關(guān)于vue的一些知識(shí)，本篇博客將進(jìn)一步探討vue其它方面的內(nèi)容，vue中關(guān)于class和style綁定，關(guān)于class和style我們并不陌生，這個(gè)在學(xué)習(xí)css的時(shí)候就是家常便飯了，操作元素的 class 列表和內(nèi)聯(lián)樣式是數(shù)據(jù)綁定的一個(gè)常見(jiàn)需求。因?yàn)樗鼈兌际菍傩?，所以我們可以?v-bind 處理它們：只需要通過(guò)表達(dá)式計(jì)算出字符串結(jié)果即可。不過(guò)，字符串拼接麻煩且易錯(cuò)。因此，在將 v-bind 用于 class 和 style 時(shí)，Vue.js 做了專門(mén)的增強(qiáng)。表達(dá)式結(jié)果的類型除了字符串之外，還可以是對(duì)象或數(shù)組，所以本章將帶你了解vue中如何綁定class和style。

本章目標(biāo)

  • 學(xué)會(huì)使用綁定class的對(duì)象語(yǔ)法
  • 學(xué)會(huì)使用綁定class的數(shù)組語(yǔ)法
  • 學(xué)會(huì)使用綁定style的對(duì)象語(yǔ)法
  • 學(xué)會(huì)使用綁定style的數(shù)組語(yǔ)法

class的對(duì)象語(yǔ)法

(1)直接寫(xiě)class屬性

(1)可以傳給 v-bind:class 一個(gè)對(duì)象，以動(dòng)態(tài)地切換 class

<div v-bind:class="{ active: isActive }"></div>

上面的語(yǔ)法表示 active 這個(gè) class 存在與否將取決于數(shù)據(jù)屬性 isActive 的 truthy，如果為truthy則使用active這個(gè)類，如果為false則不使用active這個(gè)類。
注意：在 javascript 中，truthy（真值）指的是在布爾值上下文中，轉(zhuǎn)換后的值為真的值。所有值都是真值，除非它們被定義為 假值（即除 false、0、""、null、undefined 和 NaN 以外皆為真值。
JavaScript 中的真值示例如下（將被轉(zhuǎn)換為 true，if 后的代碼段將被執(zhí)行）

if (true)
if ({})
if ([])
if (42)
if ("foo")
if (new Date())
if (-42)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)

(2)在對(duì)象中傳入更多屬性來(lái)動(dòng)態(tài)切換多個(gè) class。此外，v-bind:class 指令也可以與普通的 class 屬性共存。

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

data中的數(shù)據(jù)

data: {
  isActive: true,
  hasError: false
}

結(jié)果：

<div class="static active"></div>

當(dāng) isActive 或者 hasError 變化時(shí)，class 列表將相應(yīng)地更新。例如，如果 hasError 的值為 true，class 列表將變?yōu)?"static active text-danger"
示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .yellow{
                background: yellow;
            }
            .border{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="border" :class="{red:red}"></div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    red:true,    //當(dāng)red的truthy時(shí)，這個(gè)類才會(huì)生效
                }
            })
        </script>
    </body>
</html>

結(jié)果：


image

(2)class作為對(duì)象處理

當(dāng)我們需要在一個(gè)元素上綁定很多個(gè)類的時(shí)候，我們就可能需要寫(xiě)很長(zhǎng)很長(zhǎng)的代碼，這樣的代碼對(duì)于我們今后的維護(hù)是十分糟糕的，所以為了解決這個(gè)問(wèn)題，我們可以將需要添加的類抽取出來(lái)，作為一個(gè)對(duì)象處理。
示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class作為對(duì)象處理</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .yellow{
                background: yellow;
            }
            .border{
                border: 1px solid black;
            }
            .radius{
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :class="classObj"></div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    red:true,    //當(dāng)red的true時(shí)，這個(gè)類才會(huì)生效
                    classObj:{
                        red:true,
                        border:true,
                        radius:true
                    }
                }
            })
        </script>
    </body>
</html>

結(jié)果：

image

可以看到，我們將需要添加的類作為一個(gè)對(duì)象，然后綁定，也是一樣的效果。

(3)class作為計(jì)算屬性處理

class作為計(jì)算屬性，這個(gè)的話就比較厲害了，這里可以進(jìn)行邏輯處理等等
示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .yellow{
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :class="computeClass"></div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    red:true,
                    yellow:true
                },
                computed:{
                    computeClass(){
                        return {
                            red:this.red&&this.yellow
                        }
                    }
                }
            })
        </script>
    </body>
</html>

結(jié)果

image

class的數(shù)組語(yǔ)法

(1)直接綁定在元素上

我們可以把一個(gè)數(shù)組傳給 v-bind:class，以應(yīng)用一個(gè) class 列表

<div v-bind:class="[activeClass, errorClass]"></div>

data中的數(shù)據(jù)

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

結(jié)果：

<div class="active text-danger"></div>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
            }
            .green{
                background: green;
            }
            .border{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :class="[green,border]"></div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    green:'green',
                    border:'border'
                }
            })
        </script>
    </body>
</html>

結(jié)果：

image

(2)使用三元表達(dá)式綁定

如果你也想根據(jù)條件切換列表中的 class，可以用三元表達(dá)式

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
            }
            .red{
                background: red;
            }
            .border{
                border: 1px solid green;
            }
            .green{
                background: green;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :class="[isActive? red: green]"></div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    isActive:false,
                    red:"red",
                    green:'green'
                }
            })
        </script>
    </body>
</html>

結(jié)果：

image

(3)數(shù)組和對(duì)象

當(dāng)有多個(gè)條件 class 時(shí)這樣寫(xiě)有些繁瑣。所以在數(shù)組語(yǔ)法中也可以使用對(duì)象語(yǔ)法

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 300px;
                height: 300px;
            }
            .red{
                background: red;
            }
            .radius{
                border-radius: 50px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :class="[{red:red},radius]"></div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    red:true,
                    radius:'radius'
                }
            })
        </script>
    </body>
</html>

結(jié)果：

image

style的對(duì)象語(yǔ)法

(1)直接綁定style

v-bind:style 的對(duì)象語(yǔ)法十分直觀——看著非常像 CSS，但其實(shí)是一個(gè) JavaScript 對(duì)象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號(hào)括起來(lái)) 來(lái)命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data中的數(shù)據(jù)

data: {
  activeColor: 'red',
  fontSize: 30
}

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <div :style="{fontSize:fontSize+'px',color:color}">你好</div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    color:'red',
                    fontSize:30
                }
            })
        </script>
    </body>
</html>

結(jié)果：

image

(2)用對(duì)象綁定style

<div v-bind:style="styleObject"></div>

data中的數(shù)據(jù)

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <div :style="styleObj">歡迎學(xué)習(xí)vue綁定style</div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    styleObj:{
                        color:'red',
                        fontSize:'30px',
                        fontWeight:'bold'
                    }
                }
            })
        </script>
    </body>
</html>

結(jié)果：

image

(3)用計(jì)算屬性綁定style

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <div :style="computeStyle">你好</div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    bl:false
                },
                computed:{
                    computeStyle(){
                        return{
                            color:this.bl?'red':'blue',
                            fontSize:this.bl?'20px':'50px',
                            fontWeight:this.bl?'bold':'normal'
                        }
                    }
                }
            })
        </script>
    </body>
</html>

結(jié)果：

image

style的數(shù)組語(yǔ)法

(1)直接綁定在元素上

v-bind:style 的數(shù)組語(yǔ)法可以將多個(gè)樣式對(duì)象應(yīng)用到同一個(gè)元素上

<div v-bind:style="[baseStyles, overridingStyles]"></div>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                display: inline-block;
                background: green;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :style="[styleObj1,styleObj2]">你好</div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    styleObj1:{
                        color:'red',
                    },
                    styleObj2:{
                        textAlign:'center',
                        lineHeight:'100px'
                    }
                }
            })
        </script>
    </body>
</html>

結(jié)果：

image

(2)多重值問(wèn)題

style 綁定中的屬性提供一個(gè)包含多個(gè)值的數(shù)組，常用于提供多個(gè)帶前綴的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
            })
        </script>
    </body>
</html>

結(jié)果：

image

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容