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 相关文章推荐
使用js简单实现了tree树菜单
Nov 20 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
如何提高javascript加载速度
Dec 26 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 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
source.php查看源文件
2006/12/09 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
set_include_path在win和linux下的区别
2008/01/10 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
python批量修改文件名的实现代码
2014/09/01 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
Django中的ajax请求
2018/10/19 Python
办理信用卡工作证明
2014/09/30 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
大学生创业事迹材料
2014/12/30 职场文书
公司催款律师函
2015/05/27 职场文书
财务管理制度范本
2015/08/04 职场文书
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
教你nginx跳转配置的四种方式
2022/07/07 Servers