接觸Vue已經有很長一段時間了，後來因為工作的原因，已經有差不多一年的時間沒有碰過它了，害怕時間久，自己就完全忘記了，所以還是想抽出一點時間將以前的知識整理一下。

剛接觸vue的時候，覺著最神奇的地方莫過於vue的數據綁定了，今天要總結的就是vue中常用的屬性綁定v-bind。

    <div id="demo">
        <!--將這個元素節點的 title 屬性和 Vue 實例的message 屬性綁定到一起。-->
        <div v-bind:title="message">DOM元素屬性綁定</div>
        <
 
div :title="msg">DOM元素屬性綁定</div>
    </div>
    <script>
        var demo1 = new Vue({
            el:‘#demo‘,
            data:{
                message:‘aaa‘,
                msg:‘bbb‘,
            }
        })
    </script>    

上面展示的是v-bind的最基本的使用，第一種是完整語法，第二種是縮寫方式，除了將元素的title屬性和vue實例的相關字段進行綁定外，還能將其他的屬性字段進行綁定，最常見的是對於樣式的綁定，即class和style屬性。

對象語法

我們可以給v-bind:class 一個對象，也可以直接綁定數據裏的一個對象，以動態地切換class。當然，v-bind:class指令也可以與普通的class特性共存。

<div id="demo">
        <div :class="{active:isActive,‘text-danger‘:hasError}">給class綁定一個對象，動態切換class</div>
        <div :class="{active:isActive,‘textDanger‘:!isActive}">給class綁定一個對象，動態切換class</
 
div>
        <div :class="classObj">給class綁定一個對象，動態切換class</div>
    </div>
    <script>
        var demo1 = new Vue({
            el:‘#demo‘,
            data:{
                isActive:true,
                hasError:true,
                classObj:{
                   ‘textColor‘:true,
                   ‘textSize‘:false
                }
            }
        })
    </script>    

數組語法

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

    <div id="demo">
        <div :class="[activeClass,errorClass]">可以把一個數組傳給 v-bind:class ，以應用一個 class 列表</div>
    </div>
    <script>
        var demo1 = new Vue({
            el:‘#demo‘,
            data:{
               activeClass:‘active‘,
               errorClass:‘text-danger‘,
            }
        })
    </script>    

三目運算

可以運用三目運算，根據條件列表中的class。

<div id="demo">
        <div class="box" :class="[isA?classA:‘‘, classB]">三目運算</div>
    </div>
    <script>
        var demo1 = new Vue({
            el:‘#demo‘,
            data:{
                classA:‘textColor‘,
                classB:‘textSize‘,
                isA:false 
            }
        })
    </script>    

內聯樣式

<div id="demo" v-bind:style="styleObject">
        <p :style="{color:rcolor,fontSize:fsize + ‘px‘ }">采用駝峰式命名</p>
        <p :style="[styleObject,A]">數組綁定</p>
    </div>
    <script>
        var demo = new Vue({
              el: ‘#demo‘,
              data: {
                  styleObject: {
                       color: ‘red‘,
                    fontSize: ‘24px‘
                },
                A:{
                    display:‘block‘,
                },
          　　rcolor:‘red‘,
         　　 fsize:24,
              },
        })
    </script>    

其他運用

<div id="demo">
        <div :disabled="isDisabled">對布爾值的屬性也有效——如果條件被求值為false，該屬性會被移除</div>
        <div :disabled="Disabled">對布爾值的屬性也有效——如果條件被求值為false，該屬性會被移除</div>
        <img :src="url" >
    </div>
    <script>
        var demo1 = new Vue({
            el:‘#demo‘,
            data:{
                ‘isDisabled‘:true,
                ‘Disabled‘:false,
                url:"https://www.baidu.com/img/bd_logo1.png?where=super"
            }
        })
    </script>    

vue之v-bind