Vue基础系列（十四）vue收集表单数据-过滤器filter的使用
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础系列（十四）vue收集表单数据-过滤器filter的使用相关的知识，希望对你有一定的参考价值。
和阿牛一起冲Vue
🌕写在前面
🍊博客主页 ：勇敢link牛牛
🎉欢迎关注：🔎点赞👍收藏⭐️留言📝
🌟本文由 勇敢link牛牛 原创，CSDN首发！
📆首发时间：🌹2022年3月27日🌹
🆕最新更新时间：🎄2022年3月27日🎄
✉️愿你熬过万丈孤独，藏下星辰大海！
📠参考书籍：📚《Vue2》
文章目录
效果展示
收集表单数据总结
- 若：
<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。 - 若：
<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
- 1.没有配置
input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值） - 2.配置input的value属性:
- (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
- (2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据number：输入字符串转为有效的数字trim：输入首尾空格过滤
code实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>收集表单数据</title>
</head>
<body>
<div id="root">
<form action="" @submit.prevent="demo">
账号: <input type="text" v-model.trim="account"><br /><br />
密码: <input type="passWord" v-model="passWord"><br><br />
性别:
男:<input type="radio" name="sex" value="男" v-model="sex">
女:<input type="radio" name="sex" value="女" v-model="sex"><br><br />
年龄: <input type="number" v-model.number="age"><br><br />
<br /><br />
爱好:
奥利给<input type="checkbox" value="奥利给" v-model="hobby">
老八秘制<input type="checkbox" value="老八秘制" v-model="hobby">
小汉堡<input type="checkbox" value="小汉堡" v-model="hobby">
<br /><br />
<select name="" id="" v-model="person">
<option value="">请选择人物</option>
<option value="马保锅">马保锅</option>
<option value="擦,大哥">擦,大哥</option>
<option value="王努力">王努力</option>
</select>
<br /><br />
<textarea name="" id="" cols="30" rows="10" v-model.lazy="other" placeholder="other"></textarea>
<br /><br />
阅读并接受<a href="#">用户协议</a><input type="checkbox" v-model="agree">
<br /><br />
<button>点击提交</button>
</form>
</div>
</body>
<script src='vue.js'></script>
<script>
Vue.config.productionTip = false;
new Vue(
el: '#root',
data:
account: '',
passWord: '',
sex: '女',
hobby: [],
person: '',
other: '',
agree: '',
age: ''
,
methods:
demo()
alert('要准备提交表单了');
// 对象转成字符串
console.log(JSON.stringify(this._data));
,
,
);
</script>
</html>
过滤器的使用
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
- 1.注册过滤器：
Vue.filter(name,callback)或new Vuefilters: - 2.使用过滤器：
xxx | 过滤器名或v-bind:属性 = "xxx | 过滤器名"
备注：
- 1.过滤器也可以接收额外参数、多个过滤器也可以串联
- 2.并没有改变原本的数据, 是产生新的对应的数据
过滤器代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器</title>
</head>
<body>
<div id="root">
<h2>显示格式化后的时间</h2>
<!-- 计算属性实现 -->
<h3>现在是:fmTime</h3>
<!-- methods实现 -->
<h3>现在是:getFmtTime()</h3>
<!-- 过滤器实现 -->
<h3>现在是:time | timeFormater</h3>
<h3>现在是:time | timeFormater('YYYY年MM月DD日')</h3>
<h3>现在是:time | timeFormater('YYYY年MM月DD日') | mySlice</h3>
</div>
</body>
<script src='vue.js'></script>
<script src="dayjs.min.js"></script>
<script>
Vue.config.productionTip = false;
//全局的过滤器
Vue.filter('mySlice', function (value)
return value.slice(0, 4)
)
new Vue(
el: '#root',
data:
time: 1648379741631
,
methods:
getFmtTime()
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
,
computed:
fmTime()
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
,//局部的过滤器
filters:
timeFormater(value, str = 'YYYY-MM-DD HH:mm:ss')
return dayjs(value).format(str);
,
// mySlice(value)
// return value.slice(0, 4);
//
);
</script>
</html>
以上是关于Vue基础系列（十四）vue收集表单数据-过滤器filter的使用的主要内容，如果未能解决你的问题，请参考以下文章