过滤器---普通过滤器使用、串联过滤器、局部与全局过滤器
过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
语法：
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=false
new 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=false
new 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)
})