Vue2.X 过滤器

这篇博客详细介绍了Vue2.x中的过滤器,包括自定义全局和局部过滤器的实现方式,以及使用过滤器的注意事项。内容涵盖过滤器的功能、如何定义以及在插值语法中的应用,同时展示了代码示例,如自定义全局过滤器和局部过滤器的Vue代码,以及如何传递参数给过滤器函数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

写在前面: 此博客记录自己学习vue学习笔记,如有侵权,联系删!
学习来源: Vue + Vue-Cli 快速入门教程
李南江老师各平台账号:

  • 微博:极客江南
  • 微信公众号:李南江
  • 腾讯课堂: 李南江
  • 网易云课堂:李南江

自定义全局过滤器

什么是过滤器?
过滤器和函数和计算属性一样都是用来处理数据的
但是过滤器一般用于格式化插入的文本数据

如何自定义全局过滤器
Vue.filter("过滤器名称", 过滤器处理函数):

如何使用全局过滤器
{{msg | 过滤器名称}}
:value="msg | 过滤器名称"

过滤器注意点
1、只能在插值语法和v-bind中使用
2、过滤器可以连续使用

html代码:

<div id="app">
    <!--Vue会把name交给指定的过滤器处理之后, 再把处理之后的结果插入到指定的元素中-->
    <p>{{name | formartStr1 | formartStr2}}</p>
</div>

如何自定义一个全局过滤器
通过Vue.filter()
filter方法接收两个参数
第一个参数: 过滤器名称
第二个参数: 处理数据的函数
注意点: 默认情况下处理数据的函数接收一个参数, 就是当前要被处理的数据
vue代码:

Vue.filter("formartStr1", function (value) {
	// console.log(value);
    value = value.replace(/学院/g, "大学");
    console.log(value);
    return value;
});
Vue.filter("formartStr2", function (value) {
    // console.log(value);
    value = value.replace(/大学/g, "幼儿园");
    console.log(value);
    return value;
});
// 这里就是MVVM中的View Model
let vue = new Vue({
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
        name: "知播渔学院, 指趣学院, 前端学院, 区块链学院"
    },
    // 专门用于存储监听事件回调函数
    methods: {
    },
    // 专门用于定义计算属性的
    computed: {
    }
});

自定义局部过滤器

自定义全局过滤器的特点
在任何一个Vue实例控制的区域中都可以使用

自定义局部过滤器的特点
只能在自定义的那个Vue实例中使用

如何自定义一个局部指令
给创建Vue实例时传递的对象添加

filters: {
    // key: 过滤器名称
    // value: 过滤器处理函数
    'formartStr': function (value) {}
}

html代码:

<div id="app1">
    <p>{{name | formartStr}}</p>
</div>
<div id="app2">
    <p>{{name | formartStr}}</p>
</div>

vue代码:

/*
Vue.filter("formartStr", function (value) {
    // console.log(value);
    value = value.replace(/学院/g, "大学");
    // console.log(value);
    return value;
});
*/
// 这里就是MVVM中的View Model
let vue1 = new Vue({
    el: '#app1',
    // 这里就是MVVM中的Model
    data: {
        name: "知播渔学院, 指趣学院, 前端学院, 区块链学院"
    },
    // 专门用于存储监听事件回调函数
    methods: {
    },
    // 专门用于定义计算属性的
    computed: {
    }
});
// 这里就是MVVM中的View Model
let vue2 = new Vue({
    el: '#app2',
    // 这里就是MVVM中的Model
    data: {
        name: "知播渔学院, 指趣学院, 前端学院, 区块链学院"
    },
    // 专门用于存储监听事件回调函数
    methods: {
    },
    // 专门用于定义计算属性的
    computed: {
    },
    // 专门用于定义局部过滤器的
    filters: {
        "formartStr": function (value) {
            // console.log(value);
            value = value.replace(/学院/g, "大学");
            // console.log(value);
            return value;
        }
    }
});

自定义过滤器注意点

注意点:
在使用过滤器的时候, 可以在过滤器名称后面加上()
如果给过滤器的名称后面加上了(), 那么就可以给过滤器的函数传递参数

html代码:

<div id="app">
    <p>{{time | dateFormart("yyyy-MM-dd")}}</p>
</div>

vue代码:

Vue.filter("dateFormart", function (value, fmStr) {
    // console.log(fmStr);
    let date = new Date(value);
    let year = date.getFullYear();
    let month = date.getMonth() + 1 + "";
    let day = date.getDate() + "";
    let hour = date.getHours() + "";
    let minute = date.getMinutes() + "";
    let second = date.getSeconds() + "";
    if(fmStr && fmStr === "yyyy-MM-dd"){
        return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
    }
    return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(2, "0")}`;
});
// 这里就是MVVM中的View Model
let vue = new Vue({
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
        time: Date.now()
    },
    // 专门用于存储监听事件回调函数
    methods: {
    },
    // 专门用于定义计算属性的
    computed: {
    }
});

代码运行结果:
在这里插入图片描述
通过过滤器使时间格式得到了改变

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值