Vue.js每天必学之表单控件绑定


Posted in Javascript onSeptember 05, 2016

基础用法

可以用 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' }
 ]
 }
})

绑定 value

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

<!-- 当选中时,`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>

但是有时我们想绑定 value 到 Vue 实例的一个动态属性上,这时可以用 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 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个特性 number:

<input v-model="age" number>

debounce

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

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

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

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

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

Javascript 相关文章推荐
JavaScript更改class和id的方法
Oct 10 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
javascript history对象详解
Feb 09 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
JS实现随机抽取三人
Nov 06 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
Javascript之datagrid查询详解
Sep 15 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
深入分析node.js的异步API和其局限性
Sep 05 #Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 #Javascript
JS锚点的设置与使用方法
Sep 05 #Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 #Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 #Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 #Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 #Javascript
You might like
PHP的栏目导航程序
2006/10/09 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
JS焦点图切换,上下翻转
2011/05/12 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
node.js express中app.param的用法详解
2017/07/16 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
windows系统下Python环境搭建教程
2017/03/28 Python
Python输出指定字符串的方法
2020/02/06 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
运动会入场式解说词
2014/02/18 职场文书
职业生涯规划书前言
2014/04/15 职场文书
师范生求职信
2014/06/14 职场文书
员工安全生产责任书
2014/07/22 职场文书
关于旅游的活动方案
2014/08/15 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
未中标通知书
2015/04/17 职场文书
dubbo服务整合zipkin详解
2021/07/26 Java/Android
Python matplotlib多个子图绘制整合
2022/04/13 Python
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技