立即学习:https://edu.csdn.net/course/play/6823/135319?utm_source=blogtoedu
七、v-bind指令
v-bind是处理HTML中的标签属性的
例如绑定<img>标签的src属性
HTML代码:
<p><img v-bind:src="imgSrc" width="200" height="100"></p>
js代码:
var app=new Vue({
el:'#app',
data:{
imgSrc:'../img/vue.jpg'
}
}
})
v-bind缩写
<a v-bind:href="url"></a>
<a :href="url"></a>
v-bind绑定Css属性
用v-bind绑定Css属性是经常用到的,绑定Css样式时,绑定的值必须在vue构造器中的data声明。
1、直接绑定css样式
html代码:
<p :class="className">1、绑定Css样式</p>
css:
.ClassA{
color:blue;
}
js代码
var app=new Vue({
el:'#app',
data:{
className:'ClassA'
}
})
2、绑定css样式进行判断,若为True显示样式,false则不显示
html代码:
<p :class={ClassA:isOk} v-model="isOk">2、绑定class中的判断</p>
用到v-model数据源绑定,isOk也需要在vue构造器中声明
js代码:
var app=new Vue({
el:'#app',
data:{
isOk:true
}
})
3、绑定class中的数组
html代码:
<p :class=[ClassColor,ClassSize]>3、绑定class中的数组</p>
js代码:
var app=new Vue({
el:'#app',
data:{
ClassColor:'ClassA',
ClassSize:'ClassB'
}
})
其中ClassA,ClassB是css样式的两个类
4、绑定class中的三元表达式
html代码:
<p :class="isOk?ClassColor:ClassSize" v-model="isOk">4、绑定class中的三元表达式</p>
js代码:
var app=new Vue({
el:'#app',
data:{
isOk:true,
ClassColor:'ClassA',
ClassSize:'ClassB'
}
})
若isOk为true则用ClassColor,false为ClassSize。
5、绑定style样式
<p :style="{color:hue,fontSize:font}">5、绑定style</p>
var app=new Vue({
el:'#app',
data:{
hue:'red',
font:'30px'
}
})
6、用对象绑定style样式
<p :style="styleObject">6、用对象绑定Style样式</p>
var app=new Vue({
el:'#app',
data:{
styleObject:{
color:'green',
fontSize:'35px'
}
}
})
新手一枚,若有不足,请指教!