Vue2.x-双向数据绑定 v-model 指令

发布时间:2018-09-19 编辑:小张个人博客 查看次数:3068

Vue2.x 表单输入双向绑定基础用法

可以用 v-model 指令在表单 <input><textarea><select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

<div class="form-group">
	<label  >User Name</label>
	<!-- v-model 指令实现表单数据双向绑定 -->
	<input v-model="name"    type="text" class="form-control"  name="name" placeholder="UserName">
	<p> {{ name }} </p>
</div>
new Vue({
    el:".vue-app",
	 data:{
		  name:'',
		  message:''
	 }
});

v-model 会忽略所有表单元素的 valuecheckedselected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

对于需要使用输入法 (如中文、日文、韩文等) 的语言,你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程,请使用 input 事件。

textarea 多行文本

<div class="form-group">
	<label  >textarea 多行文本</label>
	<textarea v-model="message" class="form-control" placeholder="add multiple lines"></textarea>
	<p> {{ message }} </p>
</div>
new Vue({
    el:".vue-app",
	 data:{
		message:''
	 }
});

在文本区域插值 (<textarea></textarea>) 并不会生效,应用 v-model 来代替。

多个复选框,绑定到同一个数组

<div class="form-group">
	 <label  >多个复选框,绑定到同一个数组</label>
	<input  type="checkbox" id="jack" value="Jack" v-model="checkedNames">
	  <label for="jack">Jack</label>
	 
	  <input  type="checkbox" id="john" value="John" v-model="checkedNames">
	  <label for="john">John</label>
	  
	  <input  type="checkbox" id="mike" value="Mike" v-model="checkedNames">
	  <label for="mike">Mike</label>

	<p>您勾选: {{ checkedNames }} </p>
</div>
new Vue({
    el:".vue-app",
	 data:{
	     checkedNames: []
	 }
  });

数据绑定修饰符

.lazy

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:

<!-- v-model.lazy 不会实时更新 按下 Enter 键才会更新绑定 -->
<input v-model.lazy="name"    type="text" class="form-control"  name="name" placeholder="UserName">

.number

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:

<!-- v-model.number 用户的输入值转为数值类型 自动过滤字符  -->
<input v-model.number="age"    type="number" class="form-control"  name="age" placeholder="Age">

.trim

如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

<!-- v-model.trim 自动过滤用户输入的首尾空白字符  -->
<input v-model.trim="trim"    type="text" class="form-control"  name="trim" placeholder="trim">



出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号