Vuejs实践--v-model

v-model用于表单类元素的双向绑定数据：

既然是双向，也就是说当表单元素的值（value）发生变化后，会导致绑定的Vue数据发生变化。

例如：v-model绑定输入框：

JS部分

var myApp = new Vue({
			el:"#container",//指定关联的元素
			data:{//用来存储数据
				context:"",
				placehode:"亲，请输入你想说的话",
				message:""
			},
			methods:{
				getVal:function(e){
					this.message=e.target.value
				}
			}
		})

HTML部分：

<div id="container" v-cloak>
		<form action="index_submit" method="get" accept-charset="utf-8">
			输入:<input type="text" name="message"
			 :placehoder="placehode"
			  v-model="context">
			<div>您输入的内容是：{{context}}</div>
			<textarea name="hehe" id="" cols="30" rows="10" v-model="context"></textarea>
			<input type="text" @input="getVal">
			你现在输入的是：{{message}}
		</form>
	</div>

对于输入框，v-model绑定的数据会反映到输入框的value,所以输入框的值发生变化的时候，由于双向绑定，就会导致绑定的数据的值发生变化。

对于这个例子，由于初始化的时候context的值为空，所以input的value也是空值。

又例如：v-model在单选框radio上的数据的双向绑定， 要用v-model配合value来使用了，在这里，value就是起到一个比较的作用（只有当数据和value值一样的时候才会被选中）。

JS部分：

var myApp = new Vue({
			el:"#container",
			data:{
				message:"HTML的那些事",
				status:true
			}
		})

HTML部分：

<div id="container" v-cloak>
		<!-- 单个单选按钮 -->
		<input type="radio" name="choosed" value="select" :checked="status"/>
		<label>{{message}}</label>
		<!-- 多单选按钮，互斥选择 -->
		<input type="radio" name="choosed" value="javaScript高级程序设计" :checked="status"/>
		<label>{{message}}</label>
		<input type="radio" name="choosed" v-model = "message" value="HTML的那些事" :checked="status"/>
		<label>{{message}}</label>
		<input type="radio" name="choosed"  v-model = "message" value="CSS秘籍" :checked="status"/>
		<label>{{message}}</label>
		<input type="radio" name="choosed"  v-model = "message" value="React实践" :checked="status"/>
		<label>{{message}}</label>
	</div>

当单选框切换的时候，因为每个单选框的value不同，所以切换的时候就相当于改变了value值，此时由于双向绑定，通过v-model绑定的Vue数据message也会发生变化，视图也就发生变化
注：在上个例子被选中的是“html的那些事儿”所对应的单选框

checkbox（多选按钮）

和radio一样，单个checkbox使用的时候，v-model绑定也是一个布尔值

 v-model绑定多选框的时候也要结合value，只不过此时绑定的数据是一个数组，value的值在数组当中才会被选中，当然这个过程也是双向的（即如果取消选中，就会导致数组减少对应的项）

会根据勾选的状态自动更新数组的状态

例如下面这个例子：

JS部分：

var myApp = new Vue({
			el:"#container",
			data:{
				checkArray:["JavaScript","Html","Css","PHP"],
				status:true
			},
			computed:{
				arrayValue:function(){
					return this.checkArray.join(",")
				}
			}
		})

HTMl部分：

<div id="container">
		<!-- 单个多选框，值在true和false之间变换-->
		<input type="checkbox" v-model = "status"  name="singleBox" value="single">
		<label for="JS">{{status}}</label>
		<!-- 多个多选框 ，绑定的是数组，数组会变化-->
		<div class="options">
			<input type="checkbox" v-model= "checkArray" name="check" value="JavaScript">
			<label>JavaScript</label>
		</div>
		<div class="options">
			<input type="checkbox" v-model= "checkArray" name="check" value="Html">
			<label>Html</label>
		</div>
		<div class="options">
			<input type="checkbox" v-model= "checkArray" name="check" value="Css">
			<label>Css</label>
		</div>
		<p>当前的数组中还剩下：{{arrayValue}}</p>
	</div>

下拉菜单：

下拉菜单也分为单选和多选，

在单选模式下，绑定的数据是一个字符串，（因为select的值就是一个字符串）用来和option的value与text进行比较，如果option有value，先匹配value，如果没有就直接匹配text，匹配到谁，选择的就是谁，当前的select的值（value）就是谁。

例如：

<!-- 单选 -->
		<select name="fourMZ" v-model = "isSelected">
			<option value="三国演">三国演义</option>
			<option value="三国演义">水浒</option>
			<option>呵呵</option>
			<option>石头记</option>
		</select>

多选的时候，select元素需要添加multiple属性，绑定的是一个数组和多选框一样（不再赘述）,但现象是：初始化的时候确实是选择了多项，但是当你切换多选的时候往往只能选择一项，不知道为什么。

JS部分：

var myApp = new Vue({
			el:"#container",
			data:{
				isSelected:"三国演义",
				options:["hello","world","haha","shushu"]
			}
		})

HTML部分：

<select name="options" multiple v-model="options">
			<option value="hello">hello</option>
			<option value="world">world</option>
			<option value="haha">hehe</option>
			<option value="shushu">shushu</option>
		</select>
		<p>当前选中的是：{{options.join(",")}}</p>

绑定值

主要介绍了v-model绑定的数据会动态变化的现象，常见于单选按钮,多选框,选择列表单选模式；

单选框：v-model绑定布尔值，v-bind绑定value属性以其他类型的值（一般是字符串），当单选按钮被选中的时候isradio的值和value相等（如上例所示）；
多选框：v-model绑定布尔值，v-bind绑定属性true-value和属性false-value（值可以是任何值），当被选中的时候isChecked的值等于trueValue的值，当未被选中的时候isChecked的值等于falseValue的值
列表框：
上述例子,当被选中的时候select的值是一个对象,你懂的

v-model的修饰符

v-model的修饰符,可串联；
.lazy:输入框中同步数据的方式从原来的input事件变为change事件(只有当失去焦点或者enter时才会同步)；
 .number:数字输入框将输入的数字由字符串类型转化为number类型；
.trim:过滤在输入内容的时候,输入的首尾空格。