表单与v-model的小demo

表单与v-model

1、基本使用

<input type="text" v-model="msg" placeholder="输入...">
<p>输入的是：{{msg}}</p>

运行结果：

补充：使用v-model时，如果用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，敲下汉字时才会更新。

2、单选按钮
1、单选按钮单独使用：不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为false时不选。

	   <input type="radio" :checked="picked">
	   <label >单选按钮</label>

2、如果是组合使用来实现互斥选择的效果，需要v-model配合value来使用

        <input type="radio" v-model="picked" value="you" >
        <label>你</label>
        <br />
        <input type="radio" v-model="picked" value="me">
        <label>我</label>
        <br />
        <input type="radio" v-model="picked" value="it" >
        <label>他</label>
        <br />
        <p>pick的是：{{picked}}</p>

data: {
        picked:'me'
	},

运行结果：

当数据picked的值与单选按钮的value值一致时，就会选中该项。

3、复选框

        <input type="checkbox" v-model="checked"  value="you">
        <label>你</label>
            <br />
        <input type="checkbox" v-model="checked"  value="me">
        <label>我</label>
            <br />
        <input type="checkbox" v-model="checked"  value="it">
        <label>它</label>
            <br />
        <p>pick的是：{{checked}}</p>

data: {
		checked:['me','you']
	  }

运行结果：

原理：多个勾选框都绑定到同一个数组类型的数据，value的值在数组当中，就会选中这一项。
这一过程也是双向的，在勾选时，value的值也会自动push到这个数组当中。
4、选择列表（下拉菜单）
下拉菜单也有单选和多选。
1、单选

        <select v-model="selected">
            <option>html</option>
            <option value="js">JavaScript</option>
            <option>css</option>
        </select>
        <br/><br/><br/>
        <p>选的课是:{{selected}}</p>

运行结果：


option是备选项，如果含有value属性，v-model会优先匹配value的值；如果没有，就直接匹配option的text，比如选中第二项时，selected的值是js，而不是JavaScript。

2、多选
给selected添加属性multiple就可以多选，此时v-mdel绑定的是一个数组，与复选框类似。


此时，按住Ctrl就可以多选。

3、在业务中，option经常用于v-for动态输出，value和text也是用v-bind来动态输出的。

   <p>动态绑定下拉</p>
        <select v-model="selected" multiple>
            <option v-for="option in options" :value="option.value">{{option.name}}</option>
        </select>
        <br/><br/><br/>
   <p>选的课是:{{selected}}</p>

data: {
		selected:'html',
        options:[
			{
				value:'html',
				name:'html'
			},
			{
				value:'JavaScript',
				name:'js'
			},
			{
				value:'css',
				name:'css'
			},
		]
		}

注：select虽然可以完成简单的下拉需求，但是在实际的额业务中不常用，因为他的样式依赖平台和浏览器，无法统一，也不太美观，功能也受限，所以常见的解决方案是用div模拟一个类似的空间，可以写一个下拉选择器的通用组件。

5、绑定值
1、单选按钮

<input type="checkbox" v-model="picked"  :value="value">
<label>单选按钮</label>
<p>{{picked}}</p>
<p>{{value}}</p>

data: {
		picked:false,
		value:'123',
	  }

在选中时，app.picked === app.value，值都相同，都是123.
2、复选框

<input type="checkbox"  v-model="toggle" :true-value="value1" :false-value="value2">
<label for="复选框"></label>
<p>{{toggle}}</p>
<p>{{value1}}</p>
<p>{{value2}}</p>

data: {
		toggle:false,
		value1:'a',
		value2:'b',
	  }

勾选时，app.toggle === app.value1；未勾选时，app.toggle === app.value2。

3、选择列表

<select v-model="selected">
    <option :value="{number:123}">123</option>
</select>
<div>选择的是：{{selected.number}}</div>

data: {
		selected:''
	  }

当选中时，app.selected是一个object，所以app.selected.number === 123。

其实到这里，可能会有一点混乱，我也有一点，但是看了这篇文章：关于绑定中v-model的理解，对于v-model的值好像理解了很多。

6、修饰符
（1） .lazy
在输入框中，v-model默认实在input事件中同步输入框的数据，使用修饰符 .lazy会转变为在change事件中同步；

<input type="text" v-model.lazy="message">
<p>输入的值{{message}}</p>

此时，message不是实时改变的，而是在失焦或者按回车时才更新。
（2） .number
可以将输入类型转换为Number类型，否则虽然输入的是数字，但是其实他的类型是String类型；在数字输入框中会比较有用。
（3） .trim
自动过滤输入的首尾空格

参考文献：《vue.js实战》