使用v-model 在表单控件上实现数据双向绑定。

单选:https://jsfiddle.net/miloer/bs49p0fx/

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

  

多个勾选:https://jsfiddle.net/miloer/bs49p0fx/1/

绑定多个元素,最后通过Vue过滤,用Json的格式,输出出来。我觉得挺优雅的。

#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>

  

https://jsfiddle.net/miloer/bs49p0fx/2/结合以上,用V-for渲染,动态去绑定的一个小例子,我觉得这个,还是挺有用的,记得刚上大学那会,学的.NET,老师有一次作业就让大家完成类似的功能。

值绑定:

有时我们想绑定值到 Vue 实例一个动态属性上。可以用 v-bind 做到。 而且 v-bind允许绑定输入框的值到非字符串值。

<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">

  

参数特性:

// 选中
vm.toggle === vm.a
// 取消选中
vm.toggle === vm.b

  

lazy:在默认情况下,v-modelinput 事件中同步输入框值与数据,可以添加一个特性lazy,从而改到在 change 事件中同步

number:将用户的输入保持为数字

debounce: 设置一个最小延迟,官方提到如果每次更新都要进行高耗操作(例如在输入提示中 Ajax 请求),它较为有用。

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

Vue#表单控件绑定的更多相关文章

  1. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  2. vue表单控件绑定(表单数据的自动收集)

    v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...

  3. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  4. 表单控件绑定v-model

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  5. vue2.0 之表单控件绑定

    表单控件绑定v-model 1.文本 <template> <div> <input type="text" name="" v- ...

  6. Vue.js学习 Item9 – 表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...

  7. vue v-model 表单控件绑定

    v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双向绑定文本 <!DOCTYPE html> <html> <head ...

  8. Vue.js-----轻量高效的MVVM框架(七、表单控件绑定)

    话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  9. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

随机推荐

  1. miRNA特点

    ### miRNA特点 (1)广泛存在于真核生物中, 是一组不编码蛋白质的短序列RNA,它本身不具有开放阅读框架(ORF),并且由不同于mRNA的独立转录单位表达. (2)通常的长度为20-24 nt ...

  2. [CG编程] 基本光照模型的实现与拓展以及常见光照模型解析

    0.前言 这篇文章写于去年的暑假.大二的假期时间多,小组便开发一个手机游戏的项目,开发过程中忙里偷闲地了解了Unity的shader编写,而CG又与shaderLab相似,所以又阅读了<CG教程 ...

  3. 如何判断自己的VPS是那种虚拟技术实现的

    我们知道VPS的虚拟技术有许多种,如Openvz.Xen.VMware vSphere.Hyper-V.KVM及Xen的HVM与PV等.在Xen中pv是半虚拟化,hvm是全虚拟化,pv只能用于linu ...

  4. 数据结构作业——hash(字符串哈希)

    Hash Description 给定长度为 n ( n<=1000000)的字符串,字符串仅由小写字母的前 m ( m<=6) 个字符组成,请你计算出共有多少长度为 k( k<=6 ...

  5. Node.js入门笔记(1):基本概念

    Node.js和JavaScript: 核心都是ECMAScrit,比如数据类型,语法结构,内置对象等等. 但是在js中顶层是window 在node中的不存在这个window(console.log ...

  6. 什么是UIScrollView

    移动设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也相当有限 当展示的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容 普通的UIView不具备滚动功能,不适合显示过多的内容 ...

  7. UI第七节——UISlider详解

    - (void)viewDidLoad { [super viewDidLoad]; // 实例化UISlider,高度对外观没有影响 UISlider *slider = [[UISlider al ...

  8. IIS连接数、IIS并发连接数、IIS最大并发工作线程数、应用程序池的队列长度、应用程序池的

    IIS连接数 一般购买过虚拟主机的朋友都熟悉购买时,会限制IIS连接数,这边先从普通不懂代码用户角度理解IIS连接数 顾名思义即为IIS服务器可以同时容纳客户请求的最高连接数,准确的说应该叫" ...

  9. Daily Scrum Meeting ——TenthDay

    一.Daily Scrum Meeting照片 二.Burndown Chart 新增了几个issues 三.项目进展 1.完成了登录界面与管理员和发布者界面的整合. 2.活动发布者界面的完成 四.问 ...

  10. JS表单验证-12个常用的JS表单验证

    JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...