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