vue学习之过滤器_filter

最新推荐文章于 2023-02-14 16:10:33 发布

qq_32021429

最新推荐文章于 2023-02-14 16:10:33 发布

阅读量110

点赞数

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_32021429/article/details/110069789

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中过滤器的使用，包括全局过滤器和局部过滤器。在过滤器中，`this`指向`window`而非Vue实例。通过示例代码展示了过滤器如何接收参数，以及过滤器链的执行过程。同时，文章讨论了过滤器中的参数传递和返回值对页面显示的影响，并强调了过滤器不会被挂载到当前实例上。

摘要由CSDN通过智能技术生成

过滤器

过滤器分全局过滤器和局部过滤器。和自定义指令一样，过滤器对应的函数中的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>