Vue2.0 【第一季】第7节 v-bind指令

Vue2.0 【第一季】 第7节 v-bind指令

---

目录

• Vue2.0 【第一季】 第7节 v-bind指令
  • 第7节 v-bind指令
    • v-bind缩写
    • 绑定CSS样式
      • 1、直接绑定class样式
      • 2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
      • 3、绑定class中的数组
      • 4、绑定class中使用三元表达式判断
      • 5、绑定style
      • 6、用对象绑定style样式

第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'
       }
   }
})

浏览器效果：