vue之filter用法

1、全局写法：

　　全局过滤器必须写在vue实例创建之前。

Vue.filter('testfilter', function (value,text) {

   // 返回处理后的值

   return value+text

   })

2、局部写法：

在组件实例对象里挂载。

filters: {

        changemsg:(val,text)=>{

            return val + text

        }

    },

3、使用：

　　只能使用在{{}}和：v-bind中，定义时第一个参数固定为预处理的数，后面的数为调用时传入的参数，调用时参数第一个对应定义时第二个参数，依次往后类推

<h3 :title="test|changemsg(1234)">{{test|changemsg(4567)}}</h3>
//多个过滤器也可以串行使用
<h2>{{name|filter1|filter2|filter3}}</h2>

4、vue-cli项目中注册多个全局过滤器写法：

//1.创建一个单独的文件定义并暴露函数对象

const filter1 = function (val) {

  return val + '--1'

}

const filter2 = function (val) {

  return val + '--2'

}

const filter3 = function (val) {

  return val + '--3'

}

export default {

  filter1,

  filter2,

  filter3

}

//2.导入main.js(在vue实例之前)

import filters from './filter/filter.js'

//3.循环注册过滤器

Object.keys(filters).forEach(key=>{

  Vue.filter(key,filters[key])

})

巴特西

vue之filter用法

最新文章

热门文章