v-bind和v-model

一、v-bind

v-bind可以动态绑定标签中属性的值,为单向绑定，当data值发生变化时才会变化 例如：

<a v-bind:href="url">网络测试</a>  //v-bind绑定href。
new Vue({
	...
	data {
		url: "http://www.baidu.com"
		}
})

还可以通过v-bind来动态绑定类名：
语法为：v-bind:class="{类名：布尔值}

<h2 v-bind:class="{active:true,line:false}"><h2>

v-bind的语法糖为:属性值

二、v-model

v-model 是动态的双向数据绑定（只能用在input, textarea, select上），以 input 为例，绑定之后随着 input 中输入内容的改变，对应绑定的数据也跟着改变（在编译阶段，vue 会编译相应的指令并依赖收集，当数据改变时触发 setter 事件并更新数据）。例如:

<input type="text" v-model="message">
new Vue({
	data {
		message: ' ', //最开始message为空
	} 
})

当在 input 中输入数据的时候，data 中 message 的数据也会动态的跟着变化：

<input type="text" v-model="message">  / /在input中输入：29kun

data {
	message: '29kun ',   // 此时message中数据自动更新为“29kun”
}

v-model等价于：

<input type="text" v-bind:value="message"  v-on:input="message=$event.target.value">

三、v-model修饰符

使用方式:v-model.xxx

• lazy修饰符
  ①默认情况下，v-model默认是在input事件中同步输入框数据的。一旦有数据发生改变，对应的data就会发生改变。
  ②lazy修饰符可以让数据失去焦点或者回车时候才更新。
• number修饰符
  ①默认情况下，在输入框输入的无论是字母还是数字，都会被当做字符串类型来进行处理。
  ②如果我们希望处理的是数字类型，使用number修饰符可以让在输入框中输入的内容自动转换成数字类型。
• trim修饰符
  ①如果输入的内容首尾有很多空格，通常我们希望将其去除
  ②可以通过trim修饰符来过滤左右两边的空格