vue的v-bind的使用

绑定属性值

v-bind能将属性值和变量进行动态的绑定。
语法使用v-bind:属性名，或者:属性名。当变量改变时，对应的属性也会改变，但是这个绑定是单向的，即改变变量会改变对应的属性值，如果直接改变html元素的属性值，变量的值不会变，如果要实现双向绑定的话，在可以使用v-model，或者自己监听事件。

<div id="app">
			<p> the message's value is {{message}}p>
			<input :value="message" />
			<br/>
			<input v-bind:value="message" />
		div>

绑定class

class可与变量动态绑定，

<style>
			.a {
				color: red;
			}

			.b {
				font-size: large;
			}

			.c {
				background-color: blue;
			}
		style>


<div id='example' class="b" v-bind:class="{a:isA,c:isC}">
			hello vue
		div>


		<div id='example2' class="b" v-bind:class="obj">
			hello vue
		div>

		<div id='exampleArray' class="b" v-bind:class="[a,c]">
			hello vue
		div>
		

		<div id='example' class="b" v-bind:class="{a:isA,c:isC}">
			<div :class="[isA ? aClass:cClass]">inner divdiv>>
		div>

		<script>
	var vm = new Vue({
				el: '#example',
				data: {
					isA: false,
					isC: false,
					aClass:'a',
					cClass:'c'
				}
			});

			var vm2 = new Vue({
				el: '#example2',
				data: {
					obj: {
						a: true,
						c: true,
					}
				}
			});

			var vm3 = new Vue({
				el: '#exampleArray',
				data: {
					a: 'a',
					c: 'c',
				}
			});	
script>

在组件中使用

带数据的绑定也同样支持

<my-component v-bind:class="{ active: isActive }">my-component>

绑定内联样式

注意绑定内联样式时，要将css属性的中划线形式转换为驼峰结构，因为本质上会将其解析成一个js对象。

<div id='exampleStyle'  v-bind:style="{color:colorVal,fontSize:fontSize}" >
			bind inner style
		div>

绑定样式对象的话，即可用中划线，也可用驼峰结构。

<div id='exampleStyleObj'  v-bind:style="styleObj">
			hello vue
		div>
<script>
var vm4 = new Vue({
				el: '#exampleStyleObj',
				data: {
					styleObj:{
						color:'red',
						'font-size':50+'px'
					}	
				}
			});
script>