Vue过滤器

最新推荐文章于 2024-09-13 14:34:15 发布

後來9527

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量222

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/WFL804203164/article/details/122213935

版权

Vue 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中如何创建和使用自定义过滤器，包括将字符串转换为大写和小写，以及如何传递参数进行日期格式化。示例中展示了如何在模板中串联使用过滤器，以及在组件内部注册局部过滤器。此外，还提到了带参数的过滤器，例如用于格式化日期。

摘要由CSDN通过智能技术生成

过滤器

格式化数据，比如将字符串格式化为字母大写，日期格式等

自定义过滤器

// 字母转大写
Vue.filter('toUpperCase', function(val){
    return val.toUpperCase();
});
// 字母转小写
Vue.filter('toLowerCase', function(val){
    return val.toLowerCase();
});

使用自定义过滤器

<div>{{ msg | toUpperCase }}</div>
// 这种方式上一个过滤后的输出值是下一个过滤器的传入值
<div>{{ msg | toUpperCase | toLowerCase }}</div>
<div :id="id | toUpperCase"></div>

局部过滤器，VUE示例中filters中添加过滤的方法

filters: {
    toUpperCase: function(val){
        return val.toUpperCase();
    }
}

带参数的过滤器

// 格式化时间
Vue.filter('format', function(val,type){
    formatDate = val.getFullYear() + "-" + (val.getMonth()+1) + "-" val.getDate();
    return val.toUpperCase();
});
<div>{{ date | format('yyyy-MM-dd') }}</div>