Vue中的过滤器
原创
©著作权归作者所有：来自51CTO博客作者十八岁讨厌编程的原创作品，请联系作者获取转载授权，否则将追究法律责任
文章目录
过滤器并非一个必须要使用的东西，它只是Vue给我们提供的一种数据处理方式。想用就用，不想用可以使用其它的办法进行替换(例如计算属性，methods方法)
案例
我们经常会遇到一种情况：将时间戳格式化为特定的形式。现在我们使用三种方法来完成这个需求：
效果如下：
使用计算属性完成
我们在这里可以引用第三方库。我们在bootCDN.cn上面可以找到，其中较为好用的时间第三方库是moment.js：
他的功能非常强大，不过它的体积稍微有点大。我们可以使用他的轻量化版本dayjs:
打开GitHub查看其使用文档：
代码如下：
<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>Document</title>
<script type="text/javascript" src="../VueEnvironment/vue.js"></script>
<script type="text/javascript" src="../VueEnvironment/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<h2>显示格式化后的时间</h2>
<h3>现在是：{{fmtTime}}</h3>
</div>
</body>
<script>new Vue({
el:'#root',
data:{
time:new Date().getTime()
},
computed:{
fmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
}
})</script>
</html>
使用methods实现
代码如下：
<body>
<div id="root">
<h2>显示格式化后的时间</h2>
<h3>现在是：{{getfmtTime()}}</h3>
</div>
</body>
<script>new Vue({
el:'#root',
data:{
time:new Date().getTime()
},
methods: {
getfmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
})</script>
使用过滤器实现
使用步骤：
代码如下：
<body>
<div id="root">
<h2>显示格式化后的时间</h2>
<h3>现在是：{{time | timeFormater}}</h3>
</div>
</body>
<script>new Vue({
el:'#root',
data:{
time:new Date().getTime()
},
filters:{
timeFormater(value){
return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')
}
}
})</script>
注意：
- 格式：
原始数据 | 过滤器的名字 - 过滤器的本质就是函数
- 我们要为过滤器添加新的配置项filter才能使用
- 执行过程：首先捕获到{{}}中的东西，再读取time，随后把time作为参数传给timeFormater也就是过滤器，最后使用过滤器的返回值将{{}}进行替换呈现
过滤器还可以传递参数，例如我们可以这样：
<body>
<div id="root">
<h2>显示格式化后的时间</h2>
<h3>现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
<h3>现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss')}}</h3>
</div>
</body>
<script>new Vue({
el:'#root',
data:{
time:new Date().getTime()
},
filters:{
timeFormater(value,str){
return dayjs(value).format(str)
}
}
})</script>
效果：
不管你写不写这个value，他都是会默认给我们传进去的
过滤器还可以串联
例如我们接着上面的案例，现在我们只显示年份：
<body>
<div id="root">
<h2>显示格式化后的时间</h2>
<h3>现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
<h3>现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss')}}</h3>
<h3>现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss') | mySlice()}}</h3>
</div>
</body>
<script>new Vue({
el:'#root',
data:{
time:new Date().getTime()
},
filters:{
timeFormater(value,str){
return dayjs(value).format(str)
},
mySlice(value){
return value.slice(0,4)
}
}
})</script>
过程如图：
先将time交给第一个过滤器timeFormater，timeFormater工作之后的结果再交给下一个过滤器mySlice。time不会交给mySlice直接处理的，而是一层层的处理的。同时还要注意：我们在Vue中的filters中配置的过滤器，都是局部过滤器
也就是说在别的Vue实例或者别的组件中是不能共用的。
全局过滤器
我们可以把上面一个案例中的mySlice配置为全局过滤器，代码如下：
<body>
<div id="root">
<h2>显示格式化后的时间</h2>
<h3>现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
<h3>现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss')}}</h3>
<h3>现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss') | mySlice()}}</h3>
</div>
</body>
<script>.filter('mySlice',(value) => {return value.slice(0,4)})
new Vue({
el:'#root',
data:{
time:new Date().getTime()
},
filters:{
timeFormater(value,str){
return dayjs(value).format(str)
},
}
})</script>
注意：
- 要在new Vue的实例对象之前就配置好
- 全局过滤器只能一个个的配置
其他的使用场景
除了在插值语法中可以使用过滤器之外，我们还可以在v-bind中使用，例如：
<body>
<div id="root">
<h2>显示格式化后的时间</h2>
<h3>现在是：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
<h3>现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss')}}</h3>
<h3 :x="name | mySlice()">现在是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss') | mySlice()}}</h3>
</div>
</body>
<script>.filter('mySlice',(value) => {return value.slice(0,4)})
new Vue({
el:'#root',
data:{
time:new Date().getTime(),
name:'csdn哈哈哈'
},
filters:{
timeFormater(value,str){
return dayjs(value).format(str)
},
}
})</script>
过滤器总结
