vue-filter过滤器

最新推荐文章于 2024-07-04 10:07:27 发布

码进未来

最新推荐文章于 2024-07-04 10:07:27 发布

阅读量1.1k

点赞数 27

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

本文链接：https://blog.csdn.net/CAUC_lin/article/details/135905390

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一、filter过滤器

过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
数据加工车间,对值进行筛选加工.

二、使用介绍

双括号插值内

{{ msg | filterA }} msg是需要处理的数据, filterA是过滤器, | 这个竖线是管道,通过这个管道
将数据传输给过滤器进行过滤 加工操作

v-bind

<h1 v-bind:id=" msg | filterA"> {{ msg }} </h1>

三、代码演示

需求：将姓名首字母大写

1、局部过滤器

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{name | upperFirstChar}}</p>
    </div>
  </body>

  <script src="js/vue.min.js"></script>
  <script>
    var Vm = new Vue({
      el: "#app",
      data: {
        name: "zhangsan",
      },
      methods: {}, //方法
      //设置过滤器，和方法同级
      filters: {
        upperFirstChar(name) {
          return name.charAt(0).toUpperCase() + name.slice(1);
        },
      },
    });
  </script>
</html>

测试结果

在这里插入图片描述

2、全局过滤器

修改代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{name | upperFirstChar}}</p>
    </div>
  </body>

  <script src="js/vue.min.js"></script>
  <script>
    //此处定义全局过滤器
    Vue.filter("upperFirstChar", function (name) {
      return name.charAt(0).toUpperCase() + name.slice(1);
    });

    var Vm = new Vue({
      el: "#app",
      data: {
        name: "zhangsan",
      },
      methods: {}, //方法
      //设置过滤器，和方法同级
      // filters: {
      //   upperFirstChar(name) {
      //     return name.charAt(0).toUpperCase() + name.slice(1);
      //   },
      // },
    });
  </script>
</html>