vue之filter用法
Posted superjsman
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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用法的主要内容,如果未能解决你的问题,请参考以下文章