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 表单数据、过滤器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了element-ui查看大图的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
Vue配置proxy代理接口报错2007 bad domain的解决
本文主要介绍了Vue配置proxy代理接口报错2007 bad domain的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了使用vue-upload上传图片的详细使用说明，文中有相关的代码示例供大家参考，感兴趣的小伙伴一起跟着小编来学习吧2023-05-05
vue props default Array或是Object的正确写法说明
这篇文章主要介绍了vue props default Array或是Object的正确写法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了antd vue v-decorator的取值与赋值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了React和Vue中监听变量变化的方法,本文通过一个场景，父组件传递子组件一个A参数，子组件需要监听A参数的变化转换为state，具体内容详情大家跟随小编一起通过本文学习吧2018-11-11
Vue如何获取new Date().getTime()时间戳
在Web开发中,前端使用Vue.js获取的是毫秒级时间戳,而PHP后端则是秒级时间戳,处理此类问题时,需要将PHP的时间戳乘以1000转换为毫秒级,以保证数据的一致性和正确的逻辑判断2024-10-10
Vue中使用vue-plugin-hiprint插件进行打印的功能实现
hiprint 是一个web 打印的js组件,无需安装软件,支持windows,macOS,linux 系统,支持移动端,PC端浏览器,angular,vue,react 等 分页预览,打印,操作简单,运行快速,本文介绍了Vue中使用vue-plugin-hiprint插件进行打印,需要的朋友可以参考下2025-04-04
这篇文章主要介绍了vue 路由跳转四种方式 (带参数)，本文通过实例代码给大家介绍的详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue中实现回车键登录功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
最新评论