Vue實戰--v-bind以及動態綁定Class和style(轉)

本文鏈接：https://blog.csdn.net/codesWay/article/details/78664148
v-bind通常用來綁定屬性的，格式是v-bind：屬性名 = "值"，簡寫:屬性名 = "值" 

之前我們知道v-bind主要就是動態更新DOM的屬性的，class作為DOM的屬性當然也不例外，那么v-bind怎么動態更新class呢，分為三種方法:對象語法和數組語法，還有就是變量語法：

變量語法：v-bind：class = "變量"，變量形式 ,這里的變量的值，通常是在css定義好的類名；

數組語法：v-bind：class= "[變量1，變量2]" ，數組形式，其實跟上面差不多，只不過可以同時綁定多個class名；

對象語法：v-bind:class =  {classname1：boolean，classname2：boolean}，對象形式，這里的classname1（2）其實就是樣式表中的類名，這里的boolean通常是一個變量，也可以是常量、計算屬性等，這種方法也是綁定class最常用的方式。

一，在對象語法下：

 用v-vind動態設置class名，其值是一個對象（如上例子，當isName為真的時候就會存在類fontCol）:

HTML部分

<div id="container">
<p :class="{fontCol:isName,setBack:!isAge}" class="weight">{{name}}</p>
<i :class="addClass">{{name}}真好看！</i>
</div>

JS部分

var myApp = new Vue({
　　el:"#container",
　　// 條件比較少
　　data:{
　　　　isName:true,
　　　　isAge:false,
　　　　name:"功守道"
　　},
　　// 條件多的時候
　　computed:{
　　　　addClass:function(){
　　　　　　return {
　　　　　　　　checked:this.isName&&!this.isAge
　　　　　　}
　　　　}
　　}
})

注意：既然是一個對象，那么該對象內的屬性可能不唯一，但總是每一項為真的時候，對應的類名就會存在。

1.通過v-bind更新的類名和元素本身存在的類名不沖突，可以優雅的共存
2.不過當v-bind：class的表達式過長或者邏輯復雜（一般當條件多於兩個的時候，可以考慮采用計算屬性，返回一個對象）

 

 

二,在數組語法下（一般用在當需要綁定多個class名的時候）：
1.值是一個數組(不論采用何種方法，最后值是一個數組就行)
2.在數組語法中可以使用對象語法，數組中的某一項可以是一個對象，當然當條件比較多的時候建議使用計算屬性，返回一個數組即可（例子略），

3.數組中的值也可以直接就是class名，也可來源於data項

HTML部分

<div id="container1">
        <!-- 僅僅數組 -->
        <div  :class="[huClas,heClas]">{{name}}</div>
        <!-- 三元表達式 -->
        <div :class="[isAge?huClas:heClas,ju]">{{name}},還行吧！</div>
        <!-- 該模式下類名huijia一直存在，還有一個類名根據isAge的真假來判斷去留 -->
        <div :class="arrMethod">{{name}},有點不好看</div>
        <!-- 計算屬性huijia一直存在，其他的根據情況 -->
    </div>

JS部分

// 數組語法：
var myApp1 = new Vue({
    el:"#container1",
    // 當條件比較少的時候
    data:{
        judge1:false,
        isAge:true,
        name:"功夫熊貓",
        huClas:"haha",
        heClas:"heihei",
        ju:"huijia"
    },
    // 條件多的時候
    computed:{
        arrMethod:function(){
            return [
        this.ju,
            {
            heClas:this.judge1&&this.isAge,
            huClas:this.isAge
             }
        ]
    }
    }
})
     

v-bind綁定style屬性（不常用,僅作了解）
v-bind綁定style，有兩種寫法一種是對象寫法，如下例，一種是數組寫法（不常用，數組中的每一項其實都是一個樣式對象,其實直接寫在一個對象里就行了。）；

<!-- 直接綁定 -->
    <div id="container" :style="{color:color,fontSize:fontSize+'px'}">
        {{house}}
        <!-- 計算屬性 -->
        <h2 :style="style1">{{house}}</h2>
        <!-- data中的 -->
        <h3 :style="style">{{house}}</h3>
    </div>
    <script type="text/javascript" src="../../dist/vue.min.js"></script>
    <script type="text/javascript">
        var myApp = new Vue({
            el:"#container",
            data:{
                house:"世家星城二期",
                color:"red",
                fontSize:18,
                style:{
                    background:"yellow",
                    fontSize:24+"px"
                }
            },
            // 計算屬性
            computed:{
                style1:function(){
                    return {
                        fontSize:this.fontSize+"px",
                        fontWeight:"italic",
                        border:"1px solid #ff0000"
                    }
                }
            }
        })

對於對象語法注意事項：

1.屬性名一般采用駝峰命名法，屬性值可以來源於data項，也可以是自己設置的固定值，
2.不建議直接在DOM中寫對象，因為不容易維護，可以將樣式對象寫在data項中或者是計算屬性中