vue.js指令v-model使用方法


Posted in Javascript onMarch 20, 2017

vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍:

v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据。这是通过设置属性访问器实现的。例如:

var data = {
 name: "erik",
 getName: function() {
  return this.name;
 },
 setName: function(name) {
  this.name = name;
 }
};

上面的代码中我们通过getName()和setName()方法作为访问器,我们可以进一步严格限制(如借助Object.defineProperty方法)不直接访问name这个属性,所有对data.name的读写都必须通过data.getName()和data.setName()方法。此时我们改写访问器方法,添加对属性值改变得到监控,便可以实现数据的双向绑定。

那么在表单处理中我们具体如何使用v-model呢,先看看官方文档给出的例子:

<form id="demo">
 <!-- text -->
 <p>
 <input type="text" v-model="msg">
 {{msg}}
 </p>
 <!-- checkbox -->
 <p>
 <input type="checkbox" v-model="checked">
 {{checked ? "yes" : "no"}}
 </p>
 <!-- radio buttons -->
 <p>
 <input type="radio" name="picked" value="one" v-model="picked">
 <input type="radio" name="picked" value="two" v-model="picked">
 {{picked}}
 </p>
 <!-- select -->
 <p>
 <select v-model="selected">
  <option>one</option>
  <option>two</option>
 </select>
 {{selected}}
 </p>
 <!-- multiple select -->
 <p>
 <select v-model="multiSelect" multiple>
  <option>one</option>
  <option>two</option>
  <option>three</option>
 </select>
 {{multiSelect}}
 </p>
 <p><pre>data: {{$data | json 2}}</pre></p>
</form>

对应的js:

new Vue({
 el: '#demo',
 data: {
 msg  : 'hi!',
 checked : true,
 picked : 'one',
 selected : 'two',
 multiSelect: ['one', 'three']
 }
})

效果如下:

vue.js指令v-model使用方法

小伙伴们可以尝试一下写出这个页面,在浏览器中当你调整上面表单元素的选中值时,你会发现下面打印的vue实例内容也会随之改变,而如果你在代码中改变vue实例data内容时渲染出来的表单选中值也会随之改变。

另外,v-model这个指令还有几个可选的参数:lazy,number,options,debounce

1.使用lazy参数是将双向数据同步的时间节点从input触发改为了change触发,调用方式如下:

<!-- synced after "change" instead of "input" -->
<input v-model="msg" lazy>

2.使用number参数是通知v-model绑定的dom元素把用户输入值默认当成数字来处理,调用如下:

<input v-model="age" number>
 

3.使用options参数是用于渲染一个select项的列表,调用方式如下:

<select v-model="selected" options="myOptions"></select>

其中options的参数名指向一个数组,该数组可以包括字符串或对象,对象可以是{text:'', value:''}的形式,指定了<option>的value属性与text内容,例如:

[
 { text: 'A', value: 'a' },
 { text: 'B', value: 'b' }
]

将渲染出:

<select>
 <option value="a">A</option>
 <option value="b">B</option>
</select>

如果对象是{ label:'', options:[...] }的形式,则可以渲染出多个option组<optgroup>,如下例:

[
 { label: 'A', options: ['a', 'b']},
 { label: 'B', options: ['c', 'd']}
]

将渲染出:

<select>
 <optgroup label="A">
 <option value="a">a</option>
 <option value="b">b</option>
 </optgroup>
 <optgroup label="B">
 <option value="c">c</option>
 <option value="d">d</option>
 </optgroup>
</select>

4.使用debounce参数是指定一个延迟时间,延迟从按键触发到数据更新同步之间的时间,当我们的更新操作比较耗时时这个属性十分有用,例如搜索引擎在我们键入字符时发送ajax请求完成自动补全提示,调用如下:

<input v-model="msg" debounce="500">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
用JS实现的一个include函数
Jul 21 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
JS简单计算器实例
Jan 20 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 #Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 #Javascript
vue.js中指令Directives详解
Mar 20 #Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 #Javascript
windows下vue.js开发环境搭建教程
Mar 20 #Javascript
js中DOM三级列表(代码分享)
Mar 20 #Javascript
深入对Vue.js $watch方法的理解
Mar 20 #Javascript
You might like
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
浅析Python中的多进程与多线程的使用
2015/04/07 Python
介绍Python中的文档测试模块
2015/04/28 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
python爬虫实现中英翻译词典
2019/06/25 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
教学质量评估实施方案
2014/03/17 职场文书
节约用水的口号
2014/06/20 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
医院志愿者活动总结
2015/05/06 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL