vue中filter

孙景荣

已于 2023-02-01 14:47:28 修改

阅读量537

点赞数

分类专栏： vue2 文章标签： vue.js 前端 javascript html css

于 2022-10-07 11:13:56 首次发布

本文链接：https://blog.csdn.net/ssjjrr/article/details/127192243

版权

vue2 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、过滤器 filter

主要用来将数据处理成用户希望看到的数据格式，分为全局过滤器和局部过滤器

1.全局过滤器: 可以在不同的组件实例中使用，Vue.filter('过滤器名称',(val)=>{val即为要处理的数据 return})，通过数据|过滤器名称使用，过滤器必须要有返回值，return 的值为处理完的数据
2.局部过滤器: 只能在当前的组件实例中使用，filters:{过滤器名称(val){val即为要处理的数据 return}}
3.过滤器可以传参数Vue.filter('过滤器名称',(val,参数1,参数2,...)=>{val即为要处理的数据 return})

二、代码演示

下面代码定义了，全局过滤器strUpper，和局部过滤器strLower

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{str|strUpper}}</p>
      <p>{{str|strLower}}</p>
    </div>

    <script>
      Vue.filter("strUpper", (val) => {
        return val.toUpperCase();
      });
      const vm = new Vue({
        el: "#app",
        data: {
          str: "aAaa",
        },
        filters: {
          strLower(val) {
            return val.toLowerCase();
          },
        },
      });
    </script>
  </body>
</html>