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 相关文章推荐
jquery中获取select选中值的代码
Jun 27 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
微信小程序排坑指南详解
May 23 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
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
PHP网站备份程序代码分享
2011/06/10 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
详解django2中关于时间处理策略
2019/03/06 Python
python中open函数的基本用法示例
2019/09/07 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
大学生个人总结的自我评价
2013/10/05 职场文书
工作的心得体会
2013/12/31 职场文书
节约用水演讲稿
2014/05/21 职场文书
走进毛泽东观后感
2015/06/04 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL