为了避免篇幅过长,常用指令我可能会分几个篇幅来介绍。
缩写::
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>
运行效果: