「这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战」。
上期说了的如何收集vue中的表单数据，本期我会说一下vue中的过滤器的使用方式，这过滤器是大家就了解一下可以了，因为这过滤器只是vue提供的新的数据处理的方式，我们可以用也可以不用，我之前讲的计算属性和methods也可以实现过滤器实现的效果，所以大家可以根据自身情况来使用就可以了这里我就给大家简单的讲讲这过滤器的使用方式：
简单实现一个时间过滤类似于这样：
现在是：2021-11-15
现在是：2021-11-15 10:25:36
下面看代码演示：
<!DOCTYPE html>
<html>
<body>
<div id="root">
<h2>显示格式化后的时间</h2>
<!-- 计算属性实现 -->
<h3>现在是：{{fmtTime}}</h3>
<!-- methods实现 -->
<h3>现在是：{{getFmtTime()}}</h3>
<!-- 过滤器实现 -->
<h3>现在是：{{time | timeFormater}}</h3>
<!-- 过滤器实现（传参） -->
<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
<h3 :x="msg | mySlice">VUE</h3>
</div>
<div id="root2">
<h2>{{msg | mySlice}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
new Vue({
el:'#root',
data:{
time:1621561377603, //时间戳
msg:'你好，VUE'
},
computed: {
fmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
methods: {
getFmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
//局部过滤器
filters:{
timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
// console.log('@',value)
return dayjs(value).format(str)
}
}
})
new Vue({
el:'#root2',
data:{
msg:'hello,atguigu!'
}
})
</script>
</html>
下面看一下效果图：
简单的对vue过滤器总结一下： 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
- 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
- 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
- 过滤器也可以接收额外参数、多个过滤器也可以串联
- 并没有改变原本的数据, 是产生新的对应的数据 本期的过滤器已经和大家简单的介绍完了，后面我还有vue的内置命令讲给大家，具体的内容会在下一篇的文章中说明。
