1.可以绑定标签属性
<div id="app">
<a v-bind:href="url"></a>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
url:'https://waimai.baidu.com'
}
})
</script>
2. 还能绑定多个属性
<div id="app">
<a v-bind:href="url" v-bind:target="target"></a>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
url:'https://waimai.baidu.com',
target:'_blank'
}
})
</script>
3. 还能绑定对象了
<div id="app1">
<!--在标签里面设置一个对象-->
<div v-bind:class="{'is-active':isActive}">test</div>
</div>
var app1 = new Vue({
el:'#app',
data:{
isActive:true
}
});
或者可以直接绑定了一个对象:
4. 可以绑定了一个数组
这个数组里面可以放对象属性也可以放对象
5. 还可以用三元表达式切换 class
6. 还可以绑定多重属性,可以用来支持浏览器的兼容性
<div v-bind:style="{display:['-webkit-box','-ms-flexbox','flex']}"
它会渲染最后一个被浏览器支持的值
如果浏览器支持不带前缀的 flexbox ,最后会显示 display:flex