vuejs之路之--v-model表单绑定

vuejs和表单元素之间的双向绑定是通过v-model实现的，当然表单有很多种元素，下面就让我们看一下在不同的表单元素之间是怎么实现双向绑定的吧；

数据绑定-单行文本

<input type="text" name="fir1" v-model= "datas" placeholder="留下一句话吧......">
<i>你输入的内容是:{{datas}}</i>

传统的输入框扳绑定，不再赘述；

数据绑定多行文本 

<b>文本域中输入的内容是：{{message}}</b>
		<textarea name="msg" id="MSG" cols="30" rows="10" v-model = "message">{{mes}}</textarea>//textearea的值只能是v-model来绑定
		<br>

绑定的是一个文本域，你也许会发现上面的例子将来文本域中到底会显示{{mes}}呢还是message呢？其实答案是message，因为毕竟是表单元素嘛，哈哈！

复选框：单个 逻辑值

<input type="checkbox" name="check" v-model = "checked">
		<label>{{checked}}</label>//checked的值根据勾选状态的不同而改变，但不是true就是false

在绑定单个复选框的时候v-model的值应该是一个布尔值（逻辑值），当值是true的时候会自动勾选上，当是false的时候取消勾选，由于是双向绑定，所以手动的点击的时候也是这样，勾选上值会变为true，没勾选上值变为false；

绑定多个复选框

<input type="checkbox" name="check" value="jack" v-model = "checkARR">
		<label>jack</label> 
		<input type="checkbox" name="check" value="many" v-model = "checkARR">
		<label>many</label>
		<input type="checkbox" name="check" value="andy" v-model = "checkARR">
		<label>andy</label>
		<br>
		<span>此时checkARR是：{{checkARR}}</span>//checkARR是一个数组，里面元素包含的是你选中的的复选框的所有的value

将会根据选择的内容而有所变化。多个值，将来肯定是一个数组的形式咯，要不你怎么表示？？哈哈

绑定单选框

<input type="radio" name="ra" value="wewew" v-model = "abs">
		<label>weaaa</label>
		<br>
		<input type="radio" name="ra" value="wewew12121" v-model = "abs">
		<label>sasasasasa</label>
		<br>
		<b>{{abs}}</b>//abs将是你选中的那个radio所对应的value值

在绑定单选框的时候，绑定的值将随着你选中的那个的value的变化而变化，反之如果在你事先已经设定好了一个初始值，那么vuejs将会匹配绑定的单选框的value值，如果匹配上，那么选中，否则不会选中;

绑定单选列表

<select name="sec" id="dada" v-model= 'select'>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<br>
		<h2>你选择了：{{select}}</h2>//select的值就是你选中的那个option所对应的value

绑定单选列表的时候（就是下拉框），实际上就是根据你选中的哪个option，然后你绑定的模板所对应的值就是你选中的那个option的value；

绑定多选列表

<!-- 绑定多选列表 -->
		<select v-model= "select2" name="sel1" id="choose" multiple="multiple">
			<option value="y">y</option>
			<option value="u">u</option>
			<option value="i">i</option>
			<option value="o">o</option>
			<option value="p">p</option>
		</select>
		<br>
		<h3>你所选的是{{select2}}</h3>//select2的值将来会是你选择的option所对应的[value]，也就是说是一个数组，只不过这个数组只有一个元素

绑定多选列表的时候，其绑定到的是一个数组，模板的值则是你选中的option所对应的value值，所组成的数组[]

绑定Value

其实在之前就已经知道可以用v-bind来绑定value值，在这里绑定value主要说明的就是在ckeckbox，radio，select等你绑定的模板的值和Value的值的是什么关系，其实之前已经比较明了了-也总结过了，对于check而言，当选中的时候，你绑定的模板的值要么是true，要么是false；对于radio你绑定的模板的值就是你选中的那个radio的value值，对于单选列表也是一样，你绑定的模板的值就是你选择的那个选项（option）所对应的value值；

还有一点比较特殊的就是：当type是checkbox的时候：你绑定的模板的值不一定是true或者false，因为在此时你已经指定过了-----

<input type="checkbox" name="hjk" v-model = "select" :true-value="dataobj.trueV" :false-value="dataobj.falseV">

JS部分

var vm = new Vue({
			el:"#container",
			data:{
				strings:"我要",
				class1:"fontColor",
				radioVal:"我来自你的家乡",
				select:"电风扇",
				weekly:"haha",
				dataobj:{
					trueV:"回家",
					falseV:"不回家"
				}
			}
		})

此时当选中的时候，你所绑定的模板select的值是”回家“，当没有选中的时候，值是“不回家”

v-model的修饰符：

1..lazy改变输入框的值和数据的同步方式，由原来的input（边输入边同步）事件变为change（输入完同步）事件；
2..number可以将用户输入的值转化为Number类型；
3..trim过滤掉用户输入的首尾空格；
4.这些修饰符可以串联