码迷,mamicode.com
首页 > 其他好文 > 详细

vue之filter用法

时间:2018-12-02 12:07:38      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:style   bind   main   tle   value   用法   bsp   val   定义   

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用法

标签:style   bind   main   tle   value   用法   bsp   val   定义   

原文地址:https://www.cnblogs.com/superjsman/p/10052145.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!