（五）Vue - 过滤器filter

最新推荐文章于 2024-05-14 08:57:42 发布

tiano_天道酬勤

最新推荐文章于 2024-05-14 08:57:42 发布

阅读量865

点赞数

分类专栏： vue 文章标签： vue vue.js javascript reactjs 过滤器

本文链接：https://blog.youkuaiyun.com/qq_33810743/article/details/107131951

版权

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了Vue.js中过滤器的使用，包括全局过滤器、局部过滤器、多个过滤器的链式调用以及带参数的过滤器。过滤器主要用于数据的格式化，不改变原始数据，提供了一种优雅的方式对数据进行加工处理。在双花括号或v-bind表达式中使用管道符调用，局部过滤器优先级高于全局过滤器。

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

（三）Vue - 过滤器filter

程序开发过程中经常会碰到需要对某一个数据进行加工或优化后使用或显示，这个时候就需要用到过滤器。
过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，这点要切记。过滤器可被用于一些常见的文本格式化。
过滤器分为全局过滤器和局部过滤器

过滤器的使用

在双花括号中使用管道符(pipeline) |隔开，或者v-bind 表达式

//过滤器的简单使用
 <p>{{ msg | msgFilter }}</p>
 //多个过滤器的链式调用，从左到右的顺序依次执行过滤器
  <p>{{ msg | msgFilter | msgFilter2 }}</p>
   //过滤器函数可带参数
  <p>{{ msg | msgFilter | msgFilter2 | msgFilter3('参数1'，'参2') }}</p>

全局过滤器

<body>
  <div id="app">
    <p>{{ msg | msgFilter }}</p>
  </div>

  <script>
    // 定义一个 Vue 全局的过滤器，名字叫做  msgFilter
    Vue.filter('msgFilter', function (msg) {
      // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
      // return msg.replace(/文字/g,"句子");
      return msg.replace("文字","句子");
    })

    var vm = new Vue({
      el: '#app',
      data: {
        msg: '我是一段文字，很长很长的文字，中文字'
      }
  });
  </script>
</body>

先看代码再看效果图：

注意：replace第一个参数是个字符串，那么它只会替换第一个匹配子串。如果replace第一个参数是 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串；否则，它也只替换第一个匹配子串。

局部过滤器

注意：当存在局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

<body>
  <div id="app">
    <!-- //过滤器的简单使用 -->
    <p>{{ msg | msgFilter2 }}</p>
  </div>

  <script>
    // 定义一个 Vue 全局的过滤器，名字叫做  msgFilter
    Vue.filter('msgFilter', function (msg) {
      // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
      // return msg.replace(/文字/g,"句子");
      return msg.replace("文字","句子");
    })

    var vm = new Vue({
      el: '#app',
      data: {
        msg: '我是一段文字，很长很长的文字，中文字'
      },
       // 定义局部过滤器，字段为过滤器名
    filters: {
      msgFilter2: function(msg) {
        return msg.replace("文字","句子");
      }
    }
  });
  </script>
</body>

多个过滤器的链式调用

<body>
  <div id="app">
    <!-- //过滤器的简单使用 -->
    <p>{{ msg | msgFilter }}</p>
    <!-- //多个过滤器的链式调用，从左到右的顺序依次执行过滤器 -->
     <p>{{ msg | msgFilter | msgFilter2 }}</p>
  </div>

  <script>
    // 定义一个 Vue 全局的过滤器，名字叫做  msgFilter
    Vue.filter('msgFilter', function (msg) {
      // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
      // return msg.replace(/文字/g,"句子");
      return msg.replace("文字","句子");
    })

    var vm = new Vue({
      el: '#app',
      data: {
        msg: '我是一段文字，很长很长的文字，中文字'
      },
       // 定义局部过滤器，字段为过滤器名
    filters: {
      msgFilter2: function(msg) {
        return msg.replace("我","他");
      }
    }
  });
  </script>
</body>

带参数的过滤器

<body>
  <div id="app">
    <!-- //过滤器的简单使用 -->
    <p>{{ msg | msgFilter }}</p>
    <!-- //多个过滤器的链式调用，从左到右的顺序依次执行过滤器 -->
     <p>{{ msg | msgFilter | msgFilter2 }}</p>
      <!-- //过滤器函数可带参数 -->
     <p>{{ msg | msgFilter | msgFilter2 | msgFilter3('参数1','参2') }}</p>
  </div>

  <script>
    // 定义一个 Vue 全局的过滤器，名字叫做  msgFilter
    Vue.filter('msgFilter', function (msg) {
      // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
      // return msg.replace(/文字/g,"句子");
      return msg.replace("文字","句子");
    })

    var vm = new Vue({
      el: '#app',
      data: {
        msg: '我是一段文字，很长很长的文字，中文字'
      },
       // 定义局部过滤器，字段为过滤器名
    filters: {
      msgFilter2: function(msg) {
        return msg.replace("我","他");
      },
      //带参数的过滤器
      msgFilter3: function(msg, arg1, arg2 ) {
        return msg.replace("一段",'2段'+arg1+arg2);
      }
    }
  });
  </script>
</body>