Vue 表单控件绑定的实现示例


Posted in Javascript onAugust 11, 2017

本文介绍了Vue 表单控件绑定的实现示例,感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。

基础用法

可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子。

Text

<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">

Checkbox

单个勾选框,逻辑值:

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</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>
<br>
<span>Checked names: {{ checkedNames | json }}</span>
new Vue({
 el: '...',
 data: {
  checkedNames: []
 }
})

Radio

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

Select

单选:

<select v-model="selected">
 <option selected>A</option>
 <option>B</option>
 <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

多选(绑定到一个数组):

<select v-model="selected" multiple>
 <option selected>A</option>
 <option>B</option>
 <option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>

动态选项,用 v-for 渲染:

<select v-model="selected">
 <option v-for="option in options" v-bind:value="option.value">
  {{ option.text }}
 </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
 el: '...',
 data: {
  selected: 'A',
  options: [
   { text: 'One', value: 'A' },
   { text: 'Two', value: 'B' },
   { text: 'Three', value: 'C' }
  ]
 }
})

值绑定

对于单选按钮,勾选框及选择框选项,v-model 绑定的值通常是静态字符串(对于勾选框是逻辑值):

<!-- 当选中时,`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中时,`selected` 为字符串 "abc" -->
<select v-model="selected">
 <option value="abc">ABC</option>
</select>

但是有时我们想绑定值到 Vue 实例一个动态属性上。可以用 v-bind 做到。 而且 v-bind允许绑定输入框的值到非字符串值。

Checkbox

<input
 type="checkbox"
 v-model="toggle"
 v-bind:true-value="a"
 v-bind:false-value="b">
// 选中
vm.toggle === vm.a
// 取消选中
vm.toggle === vm.b

Radio

<input type="radio" v-model="pick" v-bind:value="a">
// 选中
vm.pick === vm.a

Select Options 

<select v-model="selected">
 <!-- 对象字面量 -->
 <option v-bind:value="{ number: 123 }">123</option>
</select>

// 选中
typeof vm.selected // -> 'object'
vm.selected.number // -> 123

参数特性

lazy

在默认情况下,v-model 在input 事件中同步输入框值与数据,可以添加一个特性lazy,从而改到在 change 事件中同步:

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model="msg" lazy>

number

如果想自动将用户的输入保持为数字,可以添加一个特性 number:

<input v-model="age" number>

debounce

debounce 设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如在输入提示中 Ajax 请求),它较为有用。

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

注意 debounce 参数不会延迟 input 事件:它延迟“写入”底层数据。因此在使用 debounce时应当用 vm.$watch() 响应数据的变化。若想延迟 DOM 事件,应当使用 debounce 过滤器。

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

Javascript 相关文章推荐
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
js实现计算器功能
Aug 10 Javascript
小程序实现tab标签页
Nov 16 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 #Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 #Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 #Javascript
JSON对象转化为字符串详解
Aug 11 #Javascript
JS中Swiper的使用和轮播图效果
Aug 11 #Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 #Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 #Javascript
You might like
php 文件状态缓存带来的问题
2008/12/14 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
详细解析Python中的变量的数据类型
2015/05/13 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
英语专业学生个人求职信范文
2014/01/06 职场文书
毕业证丢失证明
2014/01/15 职场文书
学习自我鉴定
2014/02/01 职场文书
年会主持词结束语
2014/03/27 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书