Vue 过滤器
局部过滤器
局部过滤器定义在Vue实例的filters中，必须是一个函数，调用时使用|完成调用。
局部过滤器只能由当前的Vue实例使用。
如下，对时间类型进行过滤：
<body>
<div id="app">
{{currentTime | timeFormat}}
</div>
<script src="./vue.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
currentTime: new Date(),
},
filters: {
timeFormat(value) {
// value就是 | 左边的值
return moment(value).format("YYYY-MM-DD HH:mm:ss");
}
}
})
</script>
</body>
全局过滤器
过滤器应当定义在filter中，且是一个函数，当要调用时使用|即可完成调用。
全局过滤器可以由所有的的Vue实例使用。
<body>
<div id="app">
{{currentTime | timeFormat}}
</div>
<script src="./vue.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
<script>
Vue.filter("timeFormat",value=>{
// value就是 | 左边的值
return moment(value).format("YYYY-MM-DD HH:mm:ss");
})
const app = new Vue({
el: "#app",
data: {
currentTime: new Date(),
}
})
</script>
</body>
过滤器参数
过滤器函数中的第一个参数固定死为|左边的值。
当我们有多个参数时，可以进行如下的传递方式，下面的示例将计算七天后的时间是多久：
<body>
<div id="app">
{{currentTime | addTime(7,"days")}}
</div>
<script src="./vue.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
currentTime: new Date(),
},
filters: {
addTime(value,...arg) {
// value就是 | 左边的值,arg是右边的两个值
return moment(value).add(...arg).format("YYYY-MM-DD HH:mm:ss");
}
}
})
</script>
</body>
