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 相关文章推荐
javascript this用法小结
Dec 19 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 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计算整个目录大小的方法
2015/06/01 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
JQuery入门基础小实例(1)
2015/09/17 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
python实现拼接图片
2020/03/23 Python
python 元组的使用方法
2020/06/09 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
建筑设计所实习生自我鉴定
2013/09/25 职场文书
精彩的大学生自我评价
2013/11/17 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
爱耳日活动总结
2014/04/30 职场文书
学校周年庆活动方案
2014/08/22 职场文书
安全责任书范文
2014/08/25 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript