v-bind是处理HTML中的标签属性的。
例如:
html:
<div id="#app">
<a v-bind:href='url'></a>
</div>
js:
var app=new Vue({
el:'#app',
data:{
url:'www.baidu.com'
}
})
缩写:
<a :href='url'></a>
绑定CSS样式
在绑定CSS样式是,绑定的值必须在vue中的data属性中进行声明。
1.直接绑定class样式
<div :class="className">1、绑定classA</div>
2.绑定classA并进行判断,在isOK为true时显示样式,在isOk为false时不显示样式。
<div :class="{classA:isOk}">2、绑定class中的判断</div>
3.绑定class中的数组
<div :class="[classA,classB]">3、绑定class中的数组</div>
<div :class="[classA,{'red-font':hasError}]">3、绑定class中的数组</div>
//data中 hasError:true,则绑定red-font类
4.绑定class时使用三元表达式判断
<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
5.绑定class时使用对象
<a class="link-href" v-bind:class="className">todo</a>
data(){
return {
className:{
'red-font':true,
'blue-font':false
}
}
}
//true:绑定,false:不绑定
6.绑定style
<div :style="{color:red,fontSize:font}">5、绑定style</div>
7.用对象绑定style样式
<div :style="styleObject">6、用对象绑定style样式</div>
var app=new Vue({
el:'#app',
data:{
styleObject:{
fontSize:'24px',
color:'green'
}
}
})