Vue.js 表单控件操作小结


Posted in Javascript onMarch 29, 2018

概念说明

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

Vue.js 表单控件操作小结

输入框

实例中演示了 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>

效果如图:

Vue.js 表单控件操作小结

复选框

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

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>

效果如图:

Vue.js 表单控件操作小结

单选按钮

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>

效果如图:

Vue.js 表单控件操作小结

下拉列表

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>

效果如图:

Vue.js 表单控件操作小结

修饰符

.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.js 表单控件操作小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
JS实现音量控制拖动
Jan 15 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 Javascript
js传递数组参数到后台controller的方法
Mar 29 #Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 #Javascript
Vue项目中如何引入icon图标
Mar 28 #Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 #Javascript
javascript性能优化之分时函数的介绍
Mar 28 #Javascript
Vue数据监听方法watch的使用
Mar 28 #Javascript
Vue 自定义动态组件实例详解
Mar 28 #Javascript
You might like
xml+php动态载入与分页
2006/10/09 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
php disk_free_space 返回目录可用空间
2010/05/10 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
美国折扣网站:jClub
2017/08/07 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
学生的自我鉴定范文
2013/10/24 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
中学生自我评价2015
2015/03/03 职场文书
税务会计岗位职责
2015/04/02 职场文书
小学大队委竞选口号
2015/12/25 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书