v-bind使用

一、v-bind基本使用

有时候属性也不是写死的，也是需要根据某些变量某些数据动态来决定的。

比如动态绑定a元素的href属性
比如动态绑定img元素的src属性
比如动态绑定一些类、样式

这个时候，我们可以使用v-bind指令。

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值

<div id="app">
		<!-- 不能使用mustache语法 把imgURL直接当成字符串 在内容里面才能使用-->
		<!-- <img src="{{imgURL}}" alt=""> -->
		<img v-bind:src="imgURL" alt="">
		<a v-bind:href="aHref">百度一下</a>
		<a :href="aHref">百度一下</a>
	</div>

	<script src="../js/vue.js"></script>

	<script>
		const app = new Vue({
			el: '#app',
			data: {
				message: 'nihao',
				imgURL:'https://m.360buyimg.com/babel/jfs/t1/49107/14/3176/6019/5d0eea59E238562fd/2576bcda7fc37edd.jpg',
				aHref:'http://www.baiu.com'
			}
		})
	</script>

二、v-bind绑定class

很多时候，我们希望动态的来切换class，比如：
当数据为某个状态时，字体显示红色。
当数据另一个状态时，字体显示黑色。

绑定class有两种方式：
对象语法
数组语法

对象语法动态绑定class

对象语法的含义是:class后面跟的是一个对象。

.active{
	color:red;
}

<div id="app">
	<h2 :class="active">{{message}}</h2>
</div>

<script>
const app = new Vue({
	el: '#app',
	data: {
		message: 'nihao',
		active:'active'
	},
}

<h2 v-bind:class="{key:value}">{{message}}</h2>
<h2 v-bind:class="{类名:boolean}">{{message}}</h2>
<h2 v-bind:class="{active:true,line:false}">{{message}}</h2>

boolean值为true的时候，类就被添加。
一般把boolean值放到data中

<h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2> 

data: {
	message: 'nihao',
	isActive:true,
	isLine:true
},

如果过于复杂，可以放在一个methods或者computed中

<h2 v-bind:class="getClasses()">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>

methods:{
	getClasses: function () {
		return { active: this.isActive, line: this.isLine };
	},
	btnClick:function(){
		this.isActive=!this.isActive;
	},
}

数组语法动态绑定class

数组语法的含义是:class后面跟的是一个数组。

<h2 class="title" :class="['active','line']">{{message}}</h2>
<!-- 没有单引号，是变量 -->
<h2 class="title" :class="[active,line]">{{message}}</h2>

三、v-bind绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式。

我们可以使用驼峰式 (camelCase) fontSize
或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

<h2 :style="{key:value}">{{message}}</h2>
<h2 :style="{属性名:属性值}">{{message}}</h2>
<!-- 如果不加单引号，则是变量 -->
<h2 :style="{fontSize:'50px'}">{{message}}</h2>
<h2 :style="{fontSize:finalSize,color:finalColor}">{{message}}</h2>
<h2 :style="getStyles()">{{message}}</h2>

data: {
	message: 'nihao',
	finalSize:'100px',
	finalColor:'red'
},
methods:{
	getStyles:function(){
		return { fontSize: this.finalSize, color: this.finalColor }
	}
}