Vue2.0 【第一季】第7节 v-bind指令
Vue2.0 【第一季】 第7节 v-bind指令
目录
第7节 v-bind指令
v-bind是处理HTML中的标签属性的
例如，我们绑定img上的src属性，进行动态赋值：
html文件：
<div id="app">
<img v-bind:src="imgSrc" width="200px" />
</div>
在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的。
js文件：
var app = new Vue({
el:\'#app\',
data:{
imgSrc:\'http://a0.att.hudong.com/78/52/01200000123847134434529793168.jpg\'
}
});
我们在data对象在中增加了imgSrc属性来供html调用。
v-bind缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写方法，用冒号代替 -->
<a :href="url"></a>
绑定CSS样式
在工作中我们经常使用v-bind来绑定css样式：
在绑定CSS样式时，绑定的值必须在vue中的data属性中进行声明。
1、直接绑定class样式
html代码：
<div :class="className">1、绑定class</div>
style中的css样式：
<style>
.classA{
color: red;
}
</style>
js代码：
var app = new Vue({
el:\'#app\',
data:{
className:\'classA\',
}
});
浏览器效果：
2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
html代码：
<div :class="{classA:isOk}">2、绑定Class中的判断</div>
CSS同上；
js代码：
var app = new Vue({
el:\'#app\',
data:{
isOk:true
}
});
浏览器效果：
另：
html代码：
<div :class="{classA:isOk}">2、绑定Class中的判断</div>
<hr>
<div>
<input type="checkbox" id="isOk" v-model="isOk">
<label for="isOk">isOk={{isOk}}</label>
</div>
CSS样式不变；
js代码不变
浏览器效果：
3、绑定class中的数组
html代码：
<div :class="[classA,classB]">3、绑定class中的数组</div>
js代码：
var app = new Vue({
el:\'#app\',
data:{
classA:\'classA\',
classB:\'classB\'
}
});
浏览器效果：
4、绑定class中使用三元表达式判断
<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
CSS不变；
js代码：
var app = new Vue({
el:\'#app\',
data:{
isOk:false, //false实现classB样式，true实现classA样式
classA:\'classA\',
classB:\'classB\'
}
});
浏览器效果：
5、绑定style
<div :style="{color:red,fontSize:font}">5、绑定style</div>
CSS不需；
js代码：
var app = new Vue({
el:\'#app\',
data:{
red:\'red\',
font:\'20px\'
}
});
浏览器效果：
6、用对象绑定style样式
<div :style="styleObject">6、用对象绑定style样式</div>
js代码：
var app=new Vue({
el:\'#app\',
data:{
styleObject:{
fontSize:\'24px\',
color:\'green\'
}
}
})
浏览器效果：
版权声明：本文为Elva3zora原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。