1.3 v-bind介绍

v-bind

前面学习的指令主要作用是将值插入到我们模板的内容当中，但是除了内容需要动态决定外，某些属性也需要动态来绑定。

比如动态绑定a元素的href属性，动态绑定img元素的src属性。动态指定属性不能使用Mustache语法。

<div id="app">
    动态指定属性
	<a v-bind:href="url">百度</a>
</div>
<script type="text/javascript">			
	const app=new Vue({
		//el指定要挂载的元素
		el:'#app',
		data:{
			url:'http://www.baidu.com'
		}
	})
</script>

语法糖（简写形式）:  直接写：

<a :href="url">百度</a>

---

v-bind动态绑定class

• 对象语法（类名确定，不确定用不用）

<标签 v-bind:class={类名1:布尔值,类名2:布尔值,...,...}>这是一个伪代码式的说明</标签>

如果类名的布尔值为true，那么该类就附加至所在标签。

一般把布尔值用变量写到data中

<style type="text/css">
	.color{
		color: red;
	}
</style>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
    //:是v-bind的语法糖，对象中的键值对，键名为类名，值是布尔型，决定该类是否附加至元素
	<h2 :class="{color:see}">{{message}}</h2>
</div>
<script type="text/javascript">			
	const app=new Vue({
		//el指定要挂载的元素
		el:'#app',
		data:{
			message:'祖国，你好！',
			see:true
		}
	})
</script>

标签前边也有固定的class的话，会做合并，不会覆盖

<h2 class="固定的类名" :class="{color:see}">{{message}}</h2>

可以通过方法或者计算属性把{color:see}对象return。

• 数组语法

<标签 :class="[data中值为类名字符串的变量]"></标签>

<style type="text/css">
	.color{
		color: red;
	}
</style>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
    //:是v-bind的语法糖，数组中的元素实际上指向类名
	<h2 :class="[isRed]">{{message}}</h2>
</div>
<script type="text/javascript">			
	const app=new Vue({
		//el指定要挂载的元素
		el:'#app',
		data:{
			message:'祖国，你好！',
			isRed:'color'
		}
	})
</script>

• 作业:点击列表某项，该项文字调整为红色

<div id="app">
    <!--index==currentIndex为重点-->
	<h2 v-for="(item,index) in moives" :class="{color:index==currentIndex}" @click="changeColor(index)">{{index}}-{{item}}</h2>
</div>
<script type="text/javascript">
	const app=new Vue({
		el:'#app',
		data:{
			moives:['刘德华','周润发','梁朝伟','黎明'],
			currentIndex:-1
		},
		methods:{
			changeColor:function(i){
				this.currentIndex=i
			}
		}
	})
</script>

---

v-bind动态绑定style

• 对象语法

<标签 v-bind:style={属性名1:属性值1,属性名2:属性值2,...,...}>这是一个伪代码式的说明</标签>

属性名有两种写法：1."-"连接，与原css写法一样,但是需要使用引号括起来，否则解析报错；2.使用驼峰写法代替"-",最省事

属性值常量要加单引号

<!-- 值的错误写法,不加引号解析为变量 -->
<h2 :style="{'font-size':34px}">世界你好</h2>
<!-- 属性名使用-写法，需要引号括起来，否则报错 -->
<h2 :style="{'font-size':'34px'}">世界你好</h2>
<!-- 驼峰写法，属性名不用加引号 -->
<h2 :style="{fontSize:'55px'}">Vue世界</h2>

<div id="app">			
	<!-- 驼峰写法，属性名不用加引号 -->
	<h2 :style="{fontSize:currentValue1}">Vue世界</h2>
	<!-- 指定fontsize时，没有加单位写法 -->
	<h2 :style="{fontSize:currentValue2+'px'}">javascript世界</h2>
</div>
<script type="text/javascript">
	const app=new Vue({
		el:'#app',
		data:{
			currentValue1:'100px',
			currentValue2:10
		}
	}
</script>

• 数组语法

数组中每个元素可以设置为键值对形式的对象。

<div id="app">			
	<!-- 数组写法，数组的每个元素为对象 -->
	<h2 :style="[size,color]">Vue世界</h2>
</div>
<script type="text/javascript">
	const app=new Vue({
		el:'#app',
		data:{
			size:{fontSize:'50px'},
			color:{color:'red'}
		}
	})
</script>