Vue系列(四)之常用指令v-bind

爲了避免篇幅過長，常用指令我可能會分幾個篇幅來介紹。

v-bind api

縮寫：:

v-bind指令主要是綁定元素的屬性(比如圖片的src，元素的class，style，id等)和自定義組件(後面會講到)的prop。

來看幾個常見的使用場景：

圖片的src

<div id="app">
    <img :src="path">
</div>
<script>
    var vm = new Vue({
        data: {
            path: './img/cue.jpeg'
        }
    }).$mount('#app');

</script>

運行檢查，圖片的src已經是我們定義的path值了：

class和style

綁定樣式的使用場景，通常樣式是需要動態設置的。

比如需要根據接口返回的一個字段，來設置一個按鈕是藍色的(正常可點的)，還是置灰的(不可點狀態)。

style文件：

.btn {
   width: 100px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    color: white;
    text-align: center;
    border-radius: 10px;
    margin-top: 20px;
}

.active {
    background-color: dodgerblue;
}
.unActive{
    background-color: #999999;
}

Vue的data數據：

data: {
   path: './img/cue.jpeg',
    isActive: true,
    unActive:true,
    activeStyle:{
        backgroundColor:'#999999'
    }
}

值是字符串

支持三目運算符

<div class="btn" :class = "isActive?'active':''">字符串</div>
<div class="btn" :style = "activeStyle">字符串</div>

值是對象

<div class="btn" :class="{active:isActive}">對象</div>
<div class="btn" :style="{backgroundColor:'#999999'}">對象</div>

值是數組

<div :class="['btn','active']">數組</div>
<div :class="['btn',{unActive:unActive}]">置灰</div>
<div class="btn" :style="[activeStyle,redColor]">數組</div>

運行效果：

自定義組件prop

自定義組件prop