vue學習筆記(三)class和style綁定

時間 2020-01-03

標籤 vue 學習筆記 class style 綁定简体版

原文原文鏈接

前言

經過上一章的學習vue學習筆記(二)vue的生命週期和鉤子函數，咱們已經更近一步的知道了關於vue的一些知識，本篇博客將進一步探討vue其它方面的內容，vue中關於class和style綁定，關於class和style咱們並不陌生，這個在學習css的時候就是屢見不鮮了，操做元素的 class 列表和內聯樣式是數據綁定的一個常見需求。由於它們都是屬性，因此咱們能夠用 v-bind 處理它們：只須要經過表達式計算出字符串結果便可。不過，字符串拼接麻煩且易錯。所以，在將 v-bind 用於 class 和 style 時，Vue.js 作了專門的加強。表達式結果的類型除了字符串以外，還能夠是對象或數組，因此本章將帶你瞭解vue中如何綁定class和style。javascript

本章目標

學會使用綁定class的對象語法
學會使用綁定class的數組語法
學會使用綁定style的對象語法
學會使用綁定style的數組語法

class的對象語法

(1)直接寫class屬性

(1)能夠傳給 `v-bind:class` 一個對象，以動態地切換 class

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

上面的語法表示 active 這個 class 存在與否將取決於數據屬性 isActive 的 truthy，若是爲truthy則使用active這個類，若是爲false則不使用active這個類。css

注意：在 javascript 中，truthy（真值）指的是在布爾值上下文中，轉換後的值爲真的值。全部值都是真值，除非它們被定義爲假值（即除 false、0、""、null、undefined 和 NaN 之外皆爲真值。html

JavaScript 中的真值示例以下（將被轉換爲 true，if 後的代碼段將被執行）vue

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

(2)在對象中傳入更多屬性來動態切換多個 class。此外，`v-bind:class` 指令也能夠與普通的 class 屬性共存。

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

data中的數據java

data: {
  isActive: true,
  hasError: false
}

結果web

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

當 isActive 或者 hasError 變化時，class 列表將相應地更新。例如，若是 hasError 的值爲 true，class 列表將變爲 "static active text-danger"數組

示例：app

<!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,    //當red的truthy時，這個類纔會生效
                }
            })
        </script>
    </body>
</html>

結果：函數

(2)class做爲對象處理

當咱們須要在一個元素上綁定不少個類的時候，咱們就可能須要寫很長很長的代碼，這樣的代碼對於咱們從此的維護是十分糟糕的，因此爲了解決這個問題，咱們能夠將須要添加的類抽取出來，做爲一個對象處理。post

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class做爲對象處理</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,    //當red的true時，這個類纔會生效
                    classObj:{
                        red:true,
                        border:true,
                        radius:true
                    }
                }
            })
        </script>
    </body>
</html>

結果：

能夠看到，咱們將須要添加的類做爲一個對象，而後綁定，也是同樣的效果。

(3)class做爲計算屬性處理

class做爲計算屬性，這個的話就比較厲害了，這裏能夠進行邏輯處理等等

示例：

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

結果：

class的數組語法

(1)直接綁定在元素上

咱們能夠把一個數組傳給 v-bind:class，以應用一個 class 列表

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

data中的數據

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

結果：

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

結果：

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

若是你也想根據條件切換列表中的 class，能夠用三元表達式

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

結果：

(3)數組和對象

當有多個條件 class 時這樣寫有些繁瑣。因此在數組語法中也可使用對象語法

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

結果：

style的對象語法

(1)直接綁定style

v-bind:style 的對象語法十分直觀——看着很是像 CSS，但實際上是一個 JavaScript 對象。CSS 屬性名能夠用駝峯式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：

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

data中的數據

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>

結果：

(2)用對象綁定style

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

data中的數據

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

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <div :style="styleObj">歡迎學習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>

結果：

(3)用計算屬性綁定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>

結果：

style的數組語法

(1)直接綁定在元素上

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

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

結果：

(2)多重值問題

style 綁定中的屬性提供一個包含多個值的數組，經常使用於提供多個帶前綴的值，例如：

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