第四章：vue2中使用过滤器

一、过滤器的认识

过滤器其实就是一个函数,把当前的值传递到函数里面,加工处理后,返回到当前,过滤器使用|(管道符),默认传递参数,如果还要传递参数就要手动传递

二、定义过滤器

• 1、在vue1中系统提供了几个过滤器,vue2中全部取消了,需要自己定义

• 2、定义过滤器,过滤器定义在filters里面

  var app = new Vue({
      el: "#app",
      data: {
          text1: "hello word"
      },
      // 定义过滤器 
      filters: {
          capitalize(arg) {
              // console.log(arg);
              // console.log(arguments);
              //return arg.charAt(0).toLocaleUpperCase() + arg.substring(1);
              // 实现英文首字母大写
              return arg.replace(/(^|s+)w/g, function(s) {
                  return s.toUpperCase();
              })
          },
      }
  })

• 3、过滤器的使用

  <div id="app">
      <p>{{text1 | capitalize}}</p>
  </div>

• 4、定义带参数的过滤器

  ...
  add(arg, val) {
      console.log(arg, val);
      return arg + val;
  }
  ...

  <p>{{text2 | add(5) }}</p>

三、全局过滤器

• 1、定义

  // 定义全局过滤器  
  Vue.filter("upper", function(arg) {
      console.log(arg);
      return arg.toUpperCase();
  });

• 2、使用

  <p>{{text1 | upper}}</p>

• 3、定义全局过滤器要注意点必须定义在顶部

阅读更多