Vue表单及表单绑定方法


Posted in Javascript onSeptember 04, 2018

基础用法

可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

注:

1.v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

2.对于需要使用输入法 (如中文、日文、韩文等) 的语言,你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程,请使用 input 事件。

输入框

案例1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 输入框</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
 <p>input 元素:{{ message }}</p>
 <input v-model="message" placeholder="编辑我……">
 
 <p style="white-space: pre">textarea 元素:{{ message2 }}</p>
 <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>
 
<script>
new Vue({
 el: '#app',
 data: {
 message: 'you can try it ',
	message2: '多行语句\r\n welcome here'
 }
})
</script>
</body>
</html>

Vue表单及表单绑定方法

复选框

可以结合计算属性,输出自己想要的效果。

案例2:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 复选框</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">{{ isClick }}</label>
	
 <p>多个复选框:</p>
 <input type="checkbox" id="baidu" value="Baidu" v-model="checkedNames">
 <label for="baidu">Baidu</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: []
 },
	computed:{
		isClick:function(){
			return this.checked?"you clicked me ":"you not cleck me"
		}
	}
})
</script>
</body>
</html>

Vue表单及表单绑定方法

单选按钮

以下实例中演示了单选按钮的双向数据绑定:

案例3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 单选按钮</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
 <input type="radio" id="men" value="men" v-model="picked">
 <label for="men">男人</label>
 <br>
 <input type="radio" id="women" value="women" v-model="picked">
 <label for="women">女人</label>
 <br>
 <span>你喜欢: {{ finalChose }}({{picked}})</span>
</div>
 
<script>
new Vue({
 el: '#app',
 data: {
	picked : 'men'
 },
	computed:{
		finalChose:function(){
			return this.picked==='men'?"男人":"女人"
		}
	}
})
</script>
</body>
</html>

Vue表单及表单绑定方法

select 列表

以下实例中演示了下拉列表的双向数据绑定:

案例4

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - select 列表</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="" disabled >选择一种水果</option>
 <option value="banana">香蕉</option>
 <option value="apple">苹果</option>
 </select>
 
 <div id="output">
 选择的水果是: {{selected}}
 </div>
</div>
 
<script>
new Vue({
 el: '#app',
 data: {
	selected: '' 
 }
})
</script>
</body>
</html>

Vue表单及表单绑定方法

用 v-for 渲染的动态选项:

<meta charset="utf-8">
<title>Vue 测试实例 - select 列表</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 v-for="option in options" v-bind:value="option.value" stype='width:400px'>
 {{option.text}}
 </option>
 </select>
 
 <div id="output">
 选择的水果是: {{selected}}
 </div>
</div>
 
<script>
new Vue({
 el: '#app',
 data: {
 selected: '',
 options:[
  {text:'选择一个水果',value:''},
  {text:'香蕉',value:'banana'},
  {text:'苹果',value:'apple'}
 ] 
 },
})
</script>
</body>
</html>

Vue表单及表单绑定方法

修饰符

.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">

以上这篇Vue表单及表单绑定方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
js实现tab切换效果
Feb 16 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
JavaScript实现点击图片换背景
Nov 20 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 #Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 #jQuery
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 #Javascript
基于element-ui的rules中正则表达式
Sep 04 #Javascript
微信小程序的部署方法步骤
Sep 04 #Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 #Javascript
Element UI 自定义正则表达式验证方法
Sep 04 #Javascript
You might like
解析zend Framework如何自动加载类
2013/06/28 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
php array_map()函数实例用法
2021/03/03 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
详解python Todo清单实战
2018/11/01 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
师范院校学生自荐信范文
2013/12/27 职场文书
学生会部长竞聘书
2014/03/31 职场文书
协议书的格式
2014/04/23 职场文书
市场推广策划方案
2014/06/02 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL