vue.js基础03--过滤器（filter）

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

muzidigbig

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

阅读量506

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vuejs 文章标签： filter vue过滤器私有过滤器 vue 不能使用data中的数据

本文链接：https://blog.youkuaiyun.com/muzidigbig/article/details/82976776

vuejs 专栏收录该内容

79 篇文章

订阅专栏

本文深入探讨Vue.js中过滤器的使用方法，包括全局过滤器和局部过滤器的定义、应用及注意事项。通过实例展示了如何利用过滤器进行数据格式化处理。

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

注意：过滤器函数接收的第一个值是message，依次是传的其它值。
过滤器是可以叠加的，后面过滤器接收前面过滤器的返回值。

过滤器对前面的那个值进行显示的过滤并不会改变前面的那个值，即并不会改变data的数据。

不能直接使用data中的数据，可以通过传递参数的方式使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- {{}}中的|表示过滤器管道符,过滤器后面的为过滤函数 -->
        <p>{{msg | msgFormat('疯狂+1')}}</p>
        <!-- 多个过滤函数进行调用 -->
        <p>{{msg | msgFormat('疯狂+1') | test}}</p>
        <h2>{{time | dateFormat}}</h2>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>

    //过滤器的定义语法
    //Vue.filter('过滤器的名称',function () { })

    //过滤器中的function,第一个参数data，已经被规定死，永远都是过滤器管道符前面传递过来的数据
    // 从第二个参数开始就是传值
    // Vue.filter('过滤器名称',function(data){
    //     return data+123
    // });

    //定义一个Vue全局的过滤器，名字：msgFormat
    Vue.filter('msgFormat',function(msg,param) {
        //字符出中的replace方法，第一个参数，出了写一个字符串之外，还可以定义一个正则
        // return msg.replace('单纯','邪恶');
        // return msg.replace(/单纯/g,'邪恶')
        return msg.replace(/单纯/g,param)
    })
    Vue.filter('test',function(msg) {
        return msg+'love'
    })
    //如何定义一个私有过滤（局部）
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '我也是一个单纯的少年，单纯到自己很可爱，我也会喜欢你',
            time: new Date(),
        },
        //定义私有过滤器，过滤器有两个条件[过滤器名称 和 处理函数 ]
        filters: {
            /*
            过滤器调用的时候，采用的是就近原则，
            如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器
            */
            //param = '';es6的初始化值
            dateFormat: function(time,param = ''){
                var dt = new Date(time);

                // yyyy-mm-dd
                var y = dt.getFullYear();
                // var m = dt.getMonth()+1;
                var m = (dt.getMonth()+1).toString().padStart(2,'0');
                var d = dt.getDate();
                // return y+'-'+m+'-'+d;
                //模板字符串
                // return `${y}-${m}-${d}`;
                if(param.toLowerCase() === 'yyyy-mm-dd'){
                    return `${y}-${m}-${d}`;
                }else{
                    var hh = dt.getHours().toString().padStart(2,'0');
                    var mm = dt.getMinutes().toString().padStart(2,'0');
                    var ss = dt.getSeconds().toString().padStart(2,'0');
                    return `${y}-${m}-${d}  ${hh}:${mm}:${ss}`
                }
            }
        },
        methods: { }
    })
</script>
</html>

全局过滤器：

效果图

局部过滤器：

<template>
  <div class="filters">
    <div>姓名：{{msg | filterName(data1,that)}}</div>
  </div>
</template>
<script>
export default {
  name: "filters",
  data() {
    return {
      that: this,
      msg: "muzidigbug",
      data1: "big"
    };
  },
  filters: {
    filterName(msg, data1, that) {
      console.log(that.data1);
      // return msg.replace(/bug/g,this.data1);这样使用是错误的，可以通过传值的方式传递data中的数据
      return msg.replace(/bug/g, data1);
    }
  }
};
</script>

注意，不应该使用箭头函数来定义 filters。
理由：箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，严格模式下this 将是 undefined。

若有不足请多多指教！希望给您带来帮助！