过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{ filters:{} }
2.使用过滤器：{xxx | 过滤器名} 或 v-bind:属性="xxx | 过滤器名 "
备注：
1.过滤器也可以接受额外参数、多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应的数据
目录
一、使用计算属性格式化时间
二、使用函数格式化时间
三、过滤器实现时间格式化
1.普通过滤器的实现以及传入参数实现
2.多个过滤器串联
3.全局过滤器
前提：导入依赖
<script type="text/javascript" src="../js/dayjs.min.js"></script>
一、使用计算属性格式化时间
<!DOCTYPE html><html><head><meta charset="UTF-8"><title> 初识vue</title><!--引入vue 引入之后，全局就多了一个vue这个构造函数--><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>显示格式化后的时间</h2><h3>现在是：{{fmtTime}}</h3></div><script type="text/javascript">//阻止vue在启动时生成生产提示Vue.config.productionTip=falsenew Vue({el:'#root',data:{time:1621561377603},computed:{fmtTime(){return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')}}})</script> </body></html>
二、使用函数格式化时间
<!DOCTYPE html><html><head><meta charset="UTF-8"><title> 初识vue</title><!--引入vue 引入之后，全局就多了一个vue这个构造函数--><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>显示格式化后的时间</h2><!-- methods实现 --><h3>现在是:{{getFmtTime()}}</h3></div><script type="text/javascript">//阻止vue在启动时生成生产提示Vue.config.productionTip=falsenew Vue({el:'#root',data:{time:1621561377603},methods: {getFmtTime(){return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')}},})</script> </body></html>
三、过滤器实现时间格式化
1.普通过滤器的实现以及传入参数实现
<!-- 过滤器的实现 --><!-- time作为参数传给 timeFormater 之后 timeFormater的返回值代替整个插值语句--><h3>现在是：{{time | timeFormater}}</h3><!-- 虽然我们在括号里只有一个参数，但是实际上是传了两个参数，第一个参数永远是time --><h3>现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
filters:{// 当str为空的时候，我们可以给str赋值YYYY-MM-DD HH:mm:ss// 当str有值的时候，直接使用传过来的值timeFormater(value,str='YYYY-MM-DD HH:mm:ss'){return dayjs(value).format('YYYY-MM-DD HH:mm:ss')}}
2.多个过滤器串联
<!-- time传给timeFormater('YYYY-MM-DD HH:mm:ss') 工作完成之后再传给 mySlice --><h3>现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss') | mySlice}}</h3>
filters:{// 当str为空的时候，我们可以给str赋值YYYY-MM-DD HH:mm:ss// 当str有值的时候，直接使用传过来的值timeFormater(value,str='YYYY-MM-DD HH:mm:ss'){return dayjs(value).format('YYYY-MM-DD HH:mm:ss')},mySlice(value){// 截取前四位return value.slice(0,4)}}
3.全局过滤器
前两课题的过滤器都是局部的过滤器
现在我们来看一下全局过滤器
Vue.filter('mySlice',function(value){return value.slice(0,4)})
如果觉得《Vue---过滤器---普通过滤器使用 串联过滤器 局部与全局过滤器》对你有帮助，请点赞、收藏，并留下你的观点哦！
