Vue利用v-model网络各种表单数据、过滤器的示例详解

2024-11-2 22:47| 发布者: 2ae29| 查看: 93| 评论: 0

摘要: 目录1. 利用v-model网络各种表单数据2. 日期格式化3. 过滤器1. 利用v-model网络各种表单数据若<input type=“text”/>，则v-model网络的是value值，用户输入的就是value值若<input type=“radio&rdq

1. 利用v-model网络各种表单数据

若<input type=“text”/>，则v-model网络的是value值，用户输入的就是value值
若<input type=“radio”/>，则v-model网络的是value值，所以要给标签设置value值
若：<input type=“checkbox”/>
- 没有设置input的value属性，那么网络的就是checked(是布尔值)，勾选一个所有的都会被勾选
- 设置input的value属性:
v-model的初始值黑白数组，那么网络的就是checked(是布尔值)
v-model的初始值是数组，那么网络的的就是value组成的数组

v-model的三个修饰符：

lazy：失去核心再网络数据
number：输入字符串转为有用的数字
trim：去除输入的首尾空格

利用示例：

[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javaScript" src="../js/vue.js"></script> </head> <body> <div id="root">  <form @submit.prevent="printInfo"> 账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/> 密码：<input type="password" v-model="userInfo.password"> <br/><br/>  年岁：<input type="number" v-model.number="userInfo.age"> <br/><br/> 性别：男<input type="radio" name="sex" v-model="userInfo.sex" value="male"> 女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/> 爱好：学习<input type="checkbox" v-model="userInfo.hobby" value="study"> 用饭<input type="checkbox" v-model="userInfo.hobby" value="eat"> <br/><br/> 所属校区 <select v-model="userInfo.city"> <option value="">请选择校区</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> </select> <br/><br/> 其他信息： <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/> <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.baidu.com" rel="external nofollow" >《用户协议》</a> <button>提交</button> </form> </div> </body> <script type="text/javascript"> new Vue({ el:'#root', data:{ userInfo:{ account:'', password:'', age:18, sex:'female', hobby:[], city:'beijing', other:'', agree:'' } }, methods: { printInfo(){ console.log(JSON.stringify(this.userInfo)) } } }) </script> </html>[/code]

页面表现如下：

vm表现的data如下：

2. 日期格式化

在bootcn搜索dayjs，可以看到这个日期格式化的js文件
选择复制链接，打开https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js
右键另存为举行生存

利用：

[code]dayjs(1690497853551).format('YYYY年MM月DD日 HH:mm:ss')[/code]

不传时间戳，默认就是当前时间

3. 过滤器

不是必须要用的，用计算属性、method方法也可以实现

场景：对要表现的数据举行特定格式化后再表现(适用于一些简朴逻辑的处理)
注册过滤器：全局过滤器Vue.filter(name, callback)或局部过滤器new Vue{filters:{}}
利用过滤器: [code]{{xxx | 过滤器名}}[/code] 或 [code]v-bind:属性 = "xxx | 过滤器名"[/code]
注意：
- 过滤器可以自动吸取管道符前的值，也可以吸取额外参数、多个过滤器也可以串联
- 并没有改变本来的数据, 是产生新的对应的数据

利用示例：

[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javaScript" src="../js/vue.js"></script> <script type="text/javaScript" src="../js/dayjs.min.js"></script> </head> <body> <div id="root"> <h2>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h2> </div> <div id="root2"> <h2 :x="msg | mySlice">hello</h2> </div> <script type="text/javascript"> // 全局过滤器 Vue.filter('mySlice',function(value){ return value.slice(0,4) }) new Vue({ el:'#root', data:{ time:1690497853551 }, // 局部过滤器 filters:{ timeFormater(value,format='YYYY年MM月DD日 HH:mm:ss'){ return dayjs(value).format(format) } } }) new Vue({ el:'#root2', data:{ msg:'hello' } }) </script> </body> </html>[/code]

页面表现效果：

到此这篇关于Vue利用v-model网络各种表单数据、过滤器的文章就介绍到这了,更多相关vue v-mode 表单数据、过滤器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/326687e86.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：Vite热更新失效的问题办理下一篇：如何利用fetchEventSource实现sse流式哀求

账号		自动登录	找回密码
密码			立即注册

Vue利用v-model网络各种表单数据、过滤器的示例详解

目录

1. 利用v-model网络各种表单数据

2. 日期格式化

3. 过滤器

相关分类

站长推荐 /6