vue 学习之路 v-bind指令

v-bind 的主要作用是动态的更新HTML元素的属性

语法：--         v-bind:属性名  

缩写： --        ：属性

实例一：

        动态地切换class 

<div id="app">
		<div :class="{'active':isActive}">测试样式</div>		
	</div>
	<script type="text/javascript">
		var appp = new Vue({
			el:'#app',
			data:{
				isActive:true
			}
		})
	</script>

类名active依赖于数据isActive，当其为true时候，div会有拥有类名active，为false则没有。

实例二、

<div id="app">
		<div class="static" :class="{'active':isActive,'error':isError}">测试样式</div>		
	</div>
	<script type="text/javascript">
		var appp = new Vue({
			el:'#app',
			data:{
				isActive:true,
				isError:false
			}
		})
	</script>

类名依赖isActive，isError，渲染完

    <div class="static active">测试样式</div>

实例三、当表达式过长或者逻辑复杂的时候，可以绑定计算属性

<div id="app">
		<div :class="classes">测试样式</div>		
	</div>
	<script type="text/javascript">
		var appp = new Vue({
			el:'#app',
			data:{
				isActive:true,
				error:null
			},
			computed:{
				classes: function(){
					console.log(this.isActive)
					return {
						active:this.isActive && !this.error,
						'text-fail':!this.error 
					}
				}
			}
		})
	</script>

渲染完的div        <div class="active text-fail">测试样式</div>

实例四、数组语法    

<div id="app">
		<div :class="[activeCls,errorCls]">测试样式</div>		
	</div>
	<script type="text/javascript">
		var appp = new Vue({
			el:'#app',
			data:{
				activeCls:'active',
				errorCls:'error'
			}
		})
	</script>

渲染结果

    <div class="active error">测试样式</div>

实例五、

<div id="app">
		<div :class="classes">测试样式</div>		
	</div>
	<script type="text/javascript">
		var appp = new Vue({
			el:'#app',
			data:{
				size:'large',
				disabled:true
			},
			computed:{
				classes:function(){
					return [
						'btn',
						{
							['btn-' + this.size]:this.size != '',
							['btn-disabled']:this.disabled
						}
					]
				}
			}
		})
	</script>

渲染完之后的div

    <div class="btn btn-large btn-disabled">测试样式</div>