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实现简单的Canvas画图实例
Jul 04 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 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 数组使用详解 推荐
2011/06/02 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
Python Web服务器Tornado使用小结
2014/05/06 Python
Python中os.path用法分析
2015/01/15 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
python os模块简单应用示例
2019/05/23 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
Python Http请求json解析库用法解析
2020/11/28 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
建筑个人求职信范文
2014/01/25 职场文书
个人授权委托书
2014/04/03 职场文书
单位工作证明格式模板
2014/10/04 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书