vue-filter过滤器

一、filter过滤器

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

二、使用介绍

  1. 双括号插值内

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

    {{ msg }}

三、代码演示

需求:将姓名首字母大写

1、局部过滤器

  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. 测试结果

vue-filter过滤器_第1张图片

2、全局过滤器

  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>
        //此处定义全局过滤器
        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>
    
    
  2. 测试结果

vue-filter过滤器_第2张图片

你可能感兴趣的:(vue,vue.js,javascript,前端)