vue中自定义私有过滤器和全局过滤器

最新推荐文章于 2025-07-11 11:54:59 发布

原创最新推荐文章于 2025-07-11 11:54:59 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Vue.js中创建局部与全局日期格式过滤器。通过实例演示了如何使用这些过滤器显示当前日期，并提供了代码示例。

//定义私有过滤器

html中的代码

<div id='app1'>
<div >{{time | datefmt}}</div>

</div>

js
//建立一个vue例子
new Vue({
el: '#app1',//作用域
data: { time: new Date() },
filters: {
datefmt: function (input) {
var res = '';
var year = input.getFullYear();
var months = input.getMonth()+1;
var day = input.getDate();
res = year + '-' + months + '-' + day; return res;
} },

}})

//定义全局过滤器

Vue.filter('datefmt',function(gg){
    var res = '';
    var year = gg.getFullYear();
    var months = gg.getMonth()+1;
    var day = gg.getDate();
    res = year + '-' + months + '-' + day;
    return res;
})
new Vue({

    el: '#app1',
    data: {
        time: new Date()
    },
})

new Vue({

    el: '#app2',
    data: {
        time: new Date()
    },
    }
})