Vue使用v-model收集各种表单数据、过滤器的示例详解
作者：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 表单数据、过滤器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！