vue过滤器使用方法_5)写出vue的过滤器的用法-CSDN博客

本文链接：https://blog.csdn.net/weixin_43818430/article/details/110071019

vue过滤器使用方法

过滤器分全局过滤器和局部过滤器。和自定义指令一样，过滤器对应的函数中的this是window（无论是全局的还是局部的），而不是当前vue的实例。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- 过滤器可以传递参数 -->
    <h1>{{name|money(name,age)}}</h1>

    <h1>{{name|money(name,age)|newName}}</h1>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    /* 
     过滤器：全局过滤器和局部过滤器
    */
   // 全局过滤器
   Vue.filter('money', function(){
     // 过滤器中的this是window
     console.log(this); // window
     
     console.log(arguments);  // arguments的第一项是 管道符 前面表达式对应的值，后面依次是使用过滤器时传递的实参
     // 过滤器和计算属性一样，一定要return一个值
     return '我是过滤器'; // 页面上最后展示的是过滤器return的值
   });

   Vue.filter('newName', function(val){
     console.log(val); // 获取的是前面过滤器return的值

     return '我是新的过滤器'
   })
    let vm = new Vue({
      el: '#app',
      data: {
        name: '测试',
        age:100
      },

      // 局部过滤器
      filters: { 
        // 过滤器中的this是window，而不是当前实例；过滤器不会被挂载到当前实例上
        newName(val) { 
          // 有私有的优先使用私有的
          console.log(val);
          console.log(this); // window
          return '我是私有过滤器'
        }
      }
    });
     // 注意：过滤器不会被挂载到当前实例上 
     console.log(vm.newName); // undefined
  </script>
</body>

</html>