一起来学vue第三天

1. v-bind指令

   v-bind指令是vue中用来绑定属性的指令.下面是简单的示例代码.

		<div id="app">
		  <div v-bind:id="id1">文字</div>
		</div>
		
		<script>
		new Vue({
		  el: '#app',
		  data: {
		    id1: 'myid'
		  }
		})
		</script>

class属性绑定:

同时传入一个或多个类：

		<div id="app">
		    <div v-bind:class="[activeClass, errorClass]"></div>
		</div>
		
		<script>
		new Vue({
		  el: '#app',
		  data: {
		    activeClass: 'active',
		    errorClass: 'text-danger'
		  }
		})
		</script>

div v-bind:class="{active: isActive}">文字</div 这种写法的意思是，如果isActive为true，则有active类，如果为false，则没有active类。请看示例代码:

		<div id="app">
		  <div v-bind:class="{active: isActive}">文字</div>
		</div>
		
		<script>
		new Vue({
		  el: '#app',
		  data: {
		    isActive: true
		  }
		})
		</script>

style属性绑定:

		<div id="app">
		    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟小贾</div>
		</div>
		
		<script>
		new Vue({
		  el: '#app',
		  data: {
		    activeColor: 'green',
		    fontSize: 30
		  }
		})
		</script>