局部过滤器
局部过滤器定义在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",}
})
</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",filters: {
addTime(value,...arg) {
// value就是 | 左边的值,arg是右边的两个值
return moment(value).add(...arg).format("YYYY-MM-DD HH:mm:ss");
}
}
})
</script>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。