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获取input表单值的代码
Apr 19 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
javascript实现放大镜功能
Dec 09 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
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的ob_start() 控制您的浏览器cache
2009/08/03 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
python绘图库Matplotlib的安装
2014/07/03 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
Python requests模块实例用法
2019/02/11 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
放弃继承权公证书
2015/01/23 职场文书
记者节感言
2015/08/03 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
Python基础之数据结构详解
2021/04/28 Python