好资源导航 » 文章资讯 » Vue实现自带的过滤器实例

Vue实现自带的过滤器实例

2024-02-27 22:11:04 54

一过滤器写法

{{message|Filter}}

二Vue自带的过滤器:capitalize

功能:首字母大写





Vue自带的过滤器





{{message|capitalize}}

varmyVue=newVue({ el:".test", data:{ message:"abc" } })

上面代码输出:Abc

三Vue自带的过滤器:uppercase

功能:全部大写





Vue自带的过滤器





{{message|uppercase}}

varmyVue=newVue({ el:".test", data:{ message:"abc" } })

上面代码输出:ABC

四Vue自带的过滤器:uppercase

功能:全部小写





Vue自带的过滤器





{{message|lowercase}}

varmyVue=newVue({ el:".test", data:{ message:"ABC" } })

上面代码输出:abc

五Vue自带的过滤器:currency

功能:输出金钱以及小数点

参数:

第一个参数 {String}[货币符号]-默认值:'$'

第二个参数 {Number}[小数位]-默认值:2





Vue自带的过滤器





{{message|currency}}
{{message|currency'¥'"1"}}

varmyVue=newVue({ el:".test", data:{ message:"123.4673" } })

六Vue自带的过滤器:pluralize

功能:如果只有一个参数，复数形式只是简单地在末尾添加一个“s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。如果值的个数多于参数的个数，多出的使用最后一个参数。

参数：{String}single,[double,triple,...





Vue自带的过滤器





{{message}}{{message|pluralize'item'}}



{{item}}{{item|pluralize'item'}}





{{item}}{{item|pluralize'st''rd'}}





{{item}}{{item|pluralize'item'}}





{{item}}{{item|pluralize'st''rd'}}

varmyVue=newVue({ el:".test", data:{ message:1, lili:[1,2,3], man:{ name1:1, name2:2, name3:3 } } })

七Vue自带的过滤器:debounce

(1)限制：需在@里面使用

(2)参数:{Number}[wait]-默认值：300

(3)功能：包装处理器，让它延迟执行xms，默认延迟300ms。包装后的处理器在调用之后至少将延迟xms，如果在延迟结束前再次调用，延迟时长重置为xms。





Vue自带的过滤器





点击我,我将10秒后消失


varmyVue=newVue({
el:".test",
methods:{
disappear:function(){
document.getElementById("btn").style.display="none";
}
}
})

八Vue自带的过滤器:limitBy

(1)限制:需在v-for(即数组)里面使用

(2)两个参数:

第一个参数:{Number}取得数量

第二个参数:{Number}偏移量





Vue自带的过滤器






{{item}}


{{item}}



varmyVue=newVue({
el:".test",
data:{
lili:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
}
})

九Vue自带的过滤器:filterBy

(1)限制:需在v-for(即数组)里面使用

(2)三个参数:

第一个参数:{String|Function}需要搜索的字符串

第二个参数:in(可选,指定搜寻位置)

第三个参数:{String}(可选,数组格式)





Vue自带的过滤器






{{item}}



{{item.name}}



{{item.name+"+"+item.dada}}



varmyVue=newVue({
el:".test",
data:{
lili:["oi","oa","ll","lo","ouo","kk","oala"],
man:[//此处注意man是数组,不是对象
{name:"lily"},
{name:"lucy"},
{name:"oo"},
{dada:"lsh"},
{dada:"ofg"}
]
}
})

十Vue自带的过滤器:orderBy

(1)限制:需在v-for(即数组)里面使用

(2)三个参数:

第一个参数:{String|Array|Function}需要搜索的字符串

第二个参数:{String}可选参数order决定结果升序（order>=0）或降序（order<0）,默认是升序





Vue自带的过滤器







{{item}}



{{item}}




{{item.name}}



{{item.name}}




{{item.name}}



varmyVue=newVue({
el:".test",
data:{
lili:["oi","kk","ll"],
man:[//此处注意man是数组,不是对象
{
name:'Jackie',
age:62
},
{
name:'Chuck',
age:76
},
{
name:'Bruce',
age:61
}
]
},
methods:{
ageByTen:function(){
return1;
}
}
})

本文源码地址：vue-filter_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

Vue实现自带的过滤器实例

热门推荐

随机推荐