Vue过滤器详解-CSDN博客

本文链接：https://blog.csdn.net/fjxcsdn/article/details/87471198

前言—生活中经常用到过滤器，例如空气净化器，净水器等，当然我们Vue框架中也存在过滤器，它们都是用来实现对数据的筛选，过滤、格式化。

过滤器分为两种，一种是全局过滤器（filters），一种是自定义的过滤器（filters）。

1.定义私有过滤器：filters

 filters: {
        myCurrency: function (myInput, arg1) {
          //arg1:表示参数
          //myInput： 过滤器前面 | 变量的值
          return arg1 + myInput;       
       }
      }

<!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>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- <any>{{ 表达式 | 过滤器名称 }}</any> -->  
    <h4>{{price| myCurrency('￥')}}</h4>
    <h4>{{price| myCurrency('$')}}</h4>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {      
        price: 356

      },
      methods: {},
      filters: {
        myCurrency: function (myInput, arg1) {
          //arg1:表示￥
          //myInput：price 过滤器前面 | 变量的值
          return arg1 + myInput;       
       }
      }


    });
  </script>
</body>

</html>

效果如下：

2.定义全局过滤器：filter

//定义test过滤器
    Vue.filter('test', function (msg) {
      
    })

代码如下：

<!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>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- <any>{{ 表达式 | 过滤器名称 }}</any> -->
    <!-- 过滤器可以进行叠加使用 -->  
    <!-- <any>{{ 表达式 | 过滤器名称| 过滤器名称... }}</any> -->
    <p>{{ msg | msgFormat('疯狂', '帅气') | test }}</p>
  </div>
  <script>
    // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
    Vue.filter('msgFormat', function (msg, arg, arg2) {
    // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
      return msg.replace(/单纯/g, arg + arg2)
    })

    //定义test过滤器
    Vue.filter('test', function (msg) {
      return msg + '❥(^_-)❥(^_-)'
    })
    
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '单纯的我，每天都会单纯的问，谁是世界上最单纯的男人',
        price: 356

      },
      methods: {},
    });
  </script>
</body>

</html>

效果如下：