Vue.js学习 Item9 – 表单控件绑定
基础用法
可以用 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学习 Item9 – 表单控件绑定的更多相关文章
- Vue.js学习笔记——表单控件实践
最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...
- vue.js 2的表单控件
静下心,抄一段sample,以后可以快点到这里来抄...: <!DOCTYPE html> <html> <head> <meta charset=" ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- 表单控件绑定v-model
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- vue2.0 之表单控件绑定
表单控件绑定v-model 1.文本 <template> <div> <input type="text" name="" v- ...
- Vue.js学习笔记 第七篇 表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
- vue表单控件绑定(表单数据的自动收集)
v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...
- vue v-model 表单控件绑定
v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双向绑定文本 <!DOCTYPE html> <html> <head ...
随机推荐
- Java如何获取文件编码格式
1:简单判断是UTF-8或不是UTF-8,因为一般除了UTF-8之外就是GBK,所以就设置默认为GBK. 按照给定的字符集存储文件时,在文件的最开头的三个字节中就有可能存储着编码信息,所以,基本的原 ...
- mysql 非安装版本就可以用, 用于打包用
http://blog.csdn.net/iihero/article/details/5596401 http://blog.csdn.net/iihero/article/details/5596 ...
- linux驱动学习之Input输入子系统
以前,看过国嵌关于input子系统的视频课程,说实话,我看完后脑子里很乱,给我的印象好像是input子系统驱动是一个全新的驱动架构,疑惑相当多.前几天在网上,看到有很多人介绍韦东山老师的linux驱动 ...
- 如何在低api中使用View的属性设置方法如setAlpha等
ViewPagerTransforms 是一个自定义了各种翻转效果的开源库,其中的各种PageTransformer使用了view的很多属性设置方法如DepthPageTransformer中:? p ...
- 一步一步学习Unity3d学习笔记系1.2 单机游戏和网游的数据验证概念
这一次的笔记的主要内容是单机和网游的数据存储,数据验证方式,在游戏的时候除了控制角色的行动,还涉及到用户角色的升级,经验,金钱赚取,道具购买,技能升级 等等一些数据的交易, 那么单机游戏和网游的区别如 ...
- 腾讯校招技术岗面试经历及总结(已发offer)
关于笔试:只要前期复习到位,笔试还是很好过的,但是当然 分数 越高越好,否则后面会被面试官鄙视的.题目可能难度较大,但是要把会做的 都做 对,如果时间比较紧可以适度放弃部分不会的题目. 关于面试: 温 ...
- Android开发-API指南-Android简介
Introduction to Android 英文原文:http://developer.android.com/intl/zh-cn/guide/index.html 采集日期:2014-4-16 ...
- 如何绕过CDN找源站ip?
这是一个总结帖,查了一下关于这个问题的国内外大大小小的网站,对其中说的一些方法总结归纳形成,里面具体发现ip的方法不是原创,所有参考的原贴都也贴在了后面,大家可以自行看看原贴. 首先,先要明确一个概念 ...
- 8051学习笔记——AD
AD.C #include<reg52.h> #include <iic.h> #define PCF8591 0x90 //PCF8591 地址 sbit LS138A=P2 ...
- pb中创建连接webservice对象实例方法
try soapConnection conn // Define SoapConnectionHospitalServiceSoap in_hhzswebser // Declare proxyin ...