Vue.js框架入门之过滤器(四）

过滤器
概念：Vue.js 允许你自定义过滤器， 可被用作一些常见的文本格式化。过滤器可以用在两个地方： mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符"|"指示；

全局过滤器

不带参数的全局过滤器

msgFormat是过滤器的名称

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

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

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
      },
      methods: {}
    });
  </script>

因为这里有多个需要替换的地方，所以就需要把准备替换的内容用正则表达式写出来，这样才能将全局中所有需要替换的内容替换成自己想要的内容。

带参数的全局过滤器

<div id="app">
    <p>{{ msg | msgFormat('疯狂+1', '123') }</p>
 </div>

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

    
    })


    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
      },
      methods: {}
    });
  </script>

其中，function中的参数“msg”是指需要操作的内容，即“曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人”；“arg”是指“疯狂+1”；“arg2”是指“123”。

私有过滤器

<div id="app">
    <p>{{ msg | msgFormat('疯狂+1', '123') }</p>
 </div>

<script>
   
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
      },
      methods: {},
      filters: {
       // 定义一个 Vue 私有的过滤器，名字叫做  msgFormat
        Vue.filter('msgFormat', function (msg, arg, arg2) {
        // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
        return msg.replace(/单纯/g, arg + arg2)
    })
      }

    });
  </script>

总结

• 在定义私有过滤器或者在定义全局过滤器时，我们均可定义多个过滤器，只需要在相应位置定义即可。私有过滤器需要在自己的实例中的filters中进行定义；全局过滤器则不能再任何实例中进行定义
• 当使用过滤器时，出现所调用的过滤器的名字在私有过滤器和全剧过滤器中均存在一个，则优先调用私有过滤器。