概念说明

v-model指令：在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。

输入框

实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <p>input 元素：</p>

  <input v-model="message" placeholder="编辑我……">

  <p>消息是: {{ message }}</p>

  <p>textarea 元素：</p>

  <p style="white-space: pre">{{ message2 }}</p>

  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    message: 'Runoob',

    message2: '菜鸟教程\r\nhttp://www.runoob.com'

  }

})

</script>

</body>

</html>

效果如图：

复选框

复选框如果是单个为逻辑值，如果是多个则绑定到同一个数组：

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <p>单个复选框：</p>

  <input type="checkbox" id="checkbox" v-model="checked">

  <label for="checkbox">{{ checked }}</label>

  <p>多个复选框：</p>

  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">

  <label for="runoob">Runoob</label>

  <input type="checkbox" id="google" value="Google" v-model="checkedNames">

  <label for="google">Google</label>

  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">

  <label for="taobao">taobao</label>

  <br>

  <span>选择的值为: {{ checkedNames }}</span>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    checked : false,

    checkedNames: []

  }

})

</script>

</body>

</html>

效果如图：

单选按钮

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <input type="radio" id="runoob" value="Runoob" v-model="picked">

  <label for="runoob">Runoob</label>

  <br>

  <input type="radio" id="google" value="Google" v-model="picked">

  <label for="google">Google</label>

  <br>

  <span>选中值为: {{ picked }}</span>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    picked : 'Runoob'

  }

})

</script>

</body>

</html>

效果如图：

下拉列表

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <select v-model="selected" name="fruit">

    <option value="">选择一个网站</option>

    <option value="www.runoob.com">Runoob</option>

    <option value="www.google.com">Google</option>

  </select>

  <div id="output">

      选择的网站是: {{selected}}

  </div>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    selected: ''

  }

})

</script>

</body>

</html>

效果如图：

修饰符

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->

<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">

这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
.trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">

VueJS表单控件操作的更多相关文章

  1. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

  2. Vue#表单控件绑定

    使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...

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

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

  4. 我教女朋友学编程Html系列(6)—Html常用表单控件

    做过网页的人都知道,html表单控件十分重要.基本上我们注册会员.登录用户,都需要填写用户名.密码,那些框框都是表单控件. 本来今天就想写一些常用的html表单控件,于是开始搜资料,找到了一个网页,作 ...

  5. html bottom html submit按钮表单控件与CSS美化

    一.html submit与bottom按钮基本语法结构 1.html submit按钮在input标签里设置type="submit"即可设置此表单控件为按钮. submit按钮 ...

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

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

  7. 前端笔记——如何控制表单控件中的disabled

    0.前言     本文主要说明如何使能或禁止表单控件.表单控件具有disabled属性,通过设置该属性可以禁止所有的input控件,input的更多属性请参考资料[1].下面就通过一个简单的例子说明如 ...

  8. Angular19 自定义表单控件

    1 需求 当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...

  9. C# 添加Excel表单控件（Form Controls）

    在Excel中,添加的控件可以和单元格关联,我们可以操作控件来修改单元格的内容,在下面的文章中,将介绍在Excel中添加几种不同的表单控件的方法,包括: 添加文本框(Textbox) 单选按钮(Rad ...

随机推荐

  1. 【HDOJ5972】Regular Number（Bitset，ShiftAnd）

    题意:给你N位数,接下来有N行,第i行先输入n,表示这个数的第i 位上可以在接下来的n个数中挑选,然后i 行再输n个数. 然后输入需要匹配的母串,让你输出母串中有多少个可行的N位子串. n<=1 ...

  2. 【转】C#获取客户端及服务器端主机信息及其获取IP地址

    原文发布时间为:2009-10-28 -- 来源于本人的百度文章 [由搬家工具导入] 小结： 1、REMOTE_ADDR 不可被修改，但是可能会获得代理服务器的IP，而不是实际客户端的IP。 2、通过 ...

  3. .NET发布网站出现了一系列问题（1）---“无法显示XML页”的解决办法

    原文发布时间为:2008-09-11 -- 来源于本人的百度文章 [由搬家工具导入] 原因之一： 这种错误是由asp.net 帐户没有在iis注册造成的。原因可能是.net framework 2.0 ...

  4. linux下编译安装gcc5.1

    一.下载源代码:ftp://ftp.mirrorservice.org/sites/sourceware.org/pub/gcc/releases/gcc-5.1.0/gcc-5.1.0.tar.bz ...

  5. python --- comment

    single line comment : multiple line comment :

  6. 修改linux 的bash 为zsh

    针对centos1.  yum -y install zsh git   2. git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh- ...

  7. python第三方库安装和卸载

    库的安装与卸载 pip install requests pip uninstall requests 查看安装好的库 pip list   第三方库的各种安装方式如下: 一.包管理器 Python有 ...

  8. 牛客网 牛客小白月赛2 G.文

    G.文 链接:https://www.nowcoder.com/acm/contest/86/G 这个题wa了一发,有点智障,浮点数,式子里面要*1.0,忘了,然后wa了,改了就过了(脑子有坑) 代码 ...

  9. 2018 L2-027. 名人堂与代金券【结构体排序】

    L2-027. 名人堂与代金券 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 对于在中国大学MOOC(http://www.i ...

  10. UVA 725 division【暴力枚举】

    [题意]:输入正整数n,用0~9这10个数字不重复组成两个五位数abcde和fghij,使得abcde/fghij的商为n,按顺序输出所有结果.如果没有找到则输出“There are no solut ...