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 相关文章推荐
JQuery datepicker 使用方法
May 20 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
Vue仿百度搜索功能
Dec 28 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
PHP中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
Python pickle模块用法实例
2015/04/14 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
Python创建临时文件和文件夹
2020/08/05 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
感恩父母主题班会
2015/08/12 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android