Vue使用v-model收集各种表单数据、过滤器

1. 使用v-model 收集各种表单数据

若<input type=“text”/>，则v-model收集的是value值，用户输入的就是value值
若<input type=“radio”/>，则v-model收集的是value值，所以要给标签配置value值
若：<input type=“checkbox”/>
1. 没有配置input的value属性，那么收集的就是checked(是布尔值)，勾选一个所有的都会被勾选
2. 配置input的value属性:
  1. v-model的初始值是非数组，那么收集的就是checked(是布尔值)
  2. 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">《用户协议》</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如下：
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 | 过滤器名"
注意：
1. 过滤器可以自动接收管道符前的值，也可以接收额外参数、多个过滤器也可以串联
2. 并没有改变原本的数据, 是产生新的对应的数据

使用示例：

<!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>

页面显示效果：