Vue使用v-model收集各种表单数据、过滤器的示例详解
更新时间：2024年08月29日 11:36:24 作者：Bulut0907
这篇文章主要介绍了Vue使用v-model收集各种表单数据、过滤器的示例,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
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：去除输入的首尾空格
使用示例：
<!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">
<!-- prevent: 点击submit不进行跳转 -->
<form @submit.prevent="printInfo">
账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
密码：<input type="password" v-model="userInfo.password"> <br/><br/>
<!-- type="number": 现在文本框只能输入数字，但vm保存的还是字符串 -->
年龄：<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>页面显示如下：
vm显示的data如下：
2. 日期格式化
- 在bootcn搜索dayjs，可以看到这个日期格式化的js文件
- 选择复制链接，打开https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js
- 右键另存为进行保存
使用：
dayjs(1690497853551).format('YYYY年MM月DD日 HH:mm:ss')不传时间戳，默认就是当前时间
3. 过滤器
不是必须要用的，用计算属性、method方法也可以实现
- 场景：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
- 注册过滤器：全局过滤器Vue.filter(name, callback)或局部过滤器new Vue{filters:{}}
- 使用过滤器:
{{xxx | 过滤器名}}或v-bind:属性 = "xxx | 过滤器名" - 注意：
- 过滤器可以自动接收管道符前的值，也可以接收额外参数、多个过滤器也可以串联
- 并没有改变原本的数据, 是产生新的对应的数据
使用示例：
<!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>页面显示效果：
到此这篇关于Vue使用v-model收集各种表单数据、过滤器的文章就介绍到这了,更多相关vue v-mode 表单数据、过滤器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue实现嵌套菜单组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了vue中el-table单元格复制功能实现,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
下面小编就为大家分享一篇vue项目中引入noVNC远程桌面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了在Vue里如何把网页的数据导出到Excel，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要为大家详细介绍了vue使用echarts图表的详细方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了使用element-ui实现行合并过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了VUE数组根据索引删除数据,页面同时更新的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要为大家详细介绍了vue子路由跳转实现tab选项卡，完成一个简单的tab选项卡布局，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
在vue中使用echarts(折线图的demo,markline用法)
这篇文章主要介绍了在vue中使用echarts(折线图的demo,markline用法)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了如何修改vant的less样式变量方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论