vue过滤器

232 阅读1分钟

局部过滤器

  • 过滤器可以用在两个地方:双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示
  • 定义全局过滤器!任何组件都能用。
  • 过滤器使用方法是‘|’直接使用,可以使用多个过滤器

image.png 组件内过滤器,需要定义在filtets这个对象中,对象中定义的都是方法;

image.png filters是局部过滤器,只能在组件内使用;和全局过滤器一样可以传参,使用同时多个过滤器;

全局过滤器

  • Vue.filter()独立于每个实例之外
  • 这个方法又两个参数
  • 第一个参数,是全局过滤器的名字
  • 第二个参数,是全局过滤器的处理函数.

示例:

Vue.filter('capi',function(val){

            let first = val.charAt(0).toUpperCase();

            let other = val.slice(1)

            return first + other

        })