Vue之v-model的使用

v-model

用途

用于在表单类元素(单选、多选、下拉选择、输入框等)上双向绑定数据。

简单使用

• v-model与input输入框的搭配使用：

  		<div id="app">
  			<input type="text" v-model="message" placeholder="输入...."/>
  			<p>输入的内容是：{{message}}</p>
  		</div>
  		<script type="text/javascript" src="../js/vue.js">
  		</script>
  		<script type="text/javascript">
  			var app = new Vue({
  				el:'#app',
  				data:{
  					message:''
  				}
  			})
  		</script>
  

注意

使用v-model后：

• 表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性

• 对于在<textarea></textarea>之间插入的值，也不会生效

• 使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以使用@input代替v-model

  用法：

  		<div id="app">
  			<textarea @input="handleInput" placeholder="输入..."></textarea>
  			<p>输入的内容是：</p>
  			<p style="white-space: pre;">{{text}}</p>
  		</div>
  		<script type="text/javascript" src="../js/vue.js">
  		</script>
  		<script type="text/javascript">
  			var app = new Vue({
  				el:'#app',
  				data:{
  					text:''
  				},
  				methods:{
  					handleInput:function(e){
  						this.text = e.target.value;
  					}
  				}
  			})
  		</script>
  

单选按钮上使用

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

例：

		<div id="app">
			<input type="radio" :checked="picked"/>
			<label>单选按钮</label>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					picked:true
				}
			})
		</script>

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

例：

		<div id="app">
			<input type="radio" v-model="picked" id="badminton" value="羽毛球" />
			<label for="badminton">羽毛球</label>
			<br/>
			<input type="radio" v-model="picked" id="basketball" value="篮球" />
			<label for="basketball">篮球</label>
			<br/>
			<input type="radio" v-model="picked" id="football" value="足球" />
			<label for="football">足球</label>
			<br/>
			<p>选择的项是：{{picked}}</p>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					picked:"篮球"
				}
			})
		</script>

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

复选框上使用

复选框也分单独使用和组合使用，不过用法稍与单选不同。复选框单独使用时，是用v-model来绑定一个布尔值。

例：

在勾选时，数据checked的值变为了true，label中渲染的内容也会更新。

		<div id="app">
			<input type="checkbox" v-model="checked" id="checked"/>
			<label for="checked">选择状态：{{checked}}</label>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					checked:false
				}
			})
		</script>

组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组当中，就会选中这一项。这一过程也是双向的，在勾选时，value的值也会自动push到这个数组中。

例：

		<div id="app">
			<input type="checkbox" v-model="checked" id="badminton" value="羽毛球" />
			<label for="badminton">羽毛球</label>
			<br/>
			<input type="checkbox" v-model="checked" id="basketball" value="篮球" />
			<label for="basketball">篮球</label>
			<br/>
			<input type="checkbox" v-model="checked" id="football" value="足球" />
			<label for="football">足球</label>
			<br/>
			<p>选择的项是：{{checked}}</p>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					checked:['羽毛球', '篮球']
				}
			})
		</script>

选择列表上使用

选择列表就是下拉选择器，也就是常见的表单控件，同样也分为单选和多选两种。

单选例：

• 备注：<option>是备选项，如果含有value属性，v-model会优先匹配value值；如果没有，就会直接匹配<option>的text，比如选中第一项时，selected的值是badminton，而不是羽毛球，但选中第二项时，由于没有value属性，selected的值就是篮球。

		<div id="app">
			<select v-model="selected">
				<option value ="badminton">羽毛球</option>
				<option>篮球</option>
				<option>足球</option>
			</select>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					selected:'篮球'
				}
			})
		</script>

多选例：

• 备注：给<select>添加属性multiple就可以多选了，此时v-model绑定的是一个数组，与复选框用法类似。

		<div id="app">
			<select v-model="selected" <multiple></multiple>>
				<option v-for="item in options" :value="item.value">{{item.text}}</option>
			</select>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					selected:'basketball',
					options:[
						{text:'篮球', value:'basketball'},
						{text:'羽毛球', value:'badminton'},
						{text:'足球', value:'football'}
					]
				}
			})
		</script>

注：虽然用选择列表<select>可以很简单地完成下拉选择的需求，但在实际业务中由于样式依赖平台和浏览器，无法统一，也不太美观，功能也受限，比如不支持搜索，故并不常用。常见的解决方案是用div模拟一个类似的控件。

修饰符

与事件修饰符类似，v-model也有修饰符，用于控制数据同步的时机。

.lazy

在输入框中，v-model默认是在input事件中同步输入框的数据(除了提示中介绍的中文输入 法情况外)，使用修饰符.lazy会转变为在change事件中同步，示例代码如下：

		<div id="app">
			<input type="text" v-model.lazy="message"/>
			<p>{{message}}</p>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					message:''
				}
			})
		</script>

这时，message并不是实时改变的，而是在失焦或按回车时才更新。

.number

使用修饰符.number可以将输入转换为Number类型，否则虽然你输入的是数字，但它的类型其实是String，比如在数字输入框时会比较有用，示例代码如下：

		<div id="app">
			<input type="number" v-model.number="message"/>
			<p>{{message}}</p>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					message:''
				}
			})
		</script>

.trim

修饰符.trim可以自动过滤输入的首尾空格，示例代码如下：

		<div id="app">
			<input type="text" v-model.trim="message"/>
			<p>{{message}}</p>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					message:''
				}
			})
		</script>