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 相关文章推荐
Javascript中的数学函数
Apr 04 Javascript
js打印纸函数代码(递归)
Jun 18 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
Element实现动态表格的示例代码
Aug 02 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
PHP实现微信发红包程序
2015/08/24 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
重定向实现代码
2006/11/20 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
移动节点的jquery代码
2014/01/13 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
python中偏函数partial用法实例分析
2015/07/08 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Python实现定时任务
2017/02/08 Python
Python读取stdin方法实例
2019/05/24 Python
Python字典对象实现原理详解
2019/07/01 Python
python配置文件写入过程详解
2019/10/19 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
Python: glob匹配文件的操作
2020/12/11 Python
python实现图片转字符画
2021/02/19 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
销售自我评价
2013/10/22 职场文书
Django显示可视化图表的实践
2021/05/10 Python
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis