Flask接口签名sign原理与实例代码浅析
303
2023-03-20
vue自定义过滤器创建和使用方法详解
本文实例为大家分享了vue自定义过滤器创建和使用方法,供大家参考,具体内容如下
过滤器:生活中有很多例子,净水器 空气净化器 。
过滤器的作用:实现数据的筛选、过滤、格式化。
vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了。
1、过滤器创建
过滤器的本质 是一个有参数 有返回值的方法
new Vue({
filters:{
myCurrency:function(myInput){
http:// return 处理后的数据
}
}
})
2、过滤器使用
语法:
举个例子:
3、过滤器高级用法
在使用过滤器的时候,还可以指定参数,来告诉过滤器按照参数进行数据的过滤。
①如何给过滤器传参?
②如何在过滤器中接收到?
new Vue({
filters:{
//myInput是通过管道传来的数据
//arg1在调用过滤器时在圆括号中第一个参数
//arg2在调用过滤器时在圆括号中第二个参数
myCurrency:function(myInput,arg1,arg2){
return 处理后的数据
}
}
})
代码:
{{msg}}
// filter
new Vue({
el: '#container',
data: {
msg: 'Hello Vue',
price:356
},
//过滤器的本质 就是一个有参数有返回值的方法
filters:{
myCurrency:function(myInput,arg1){
console.log(arg1);
//根据业务需要,对传来的数据进行处理
// 并返回处理后的结果
var result = arg1+myInput;
return result;
}
}
})
</html>
{{msg}}
new Vue({
el: '#container',
data: {
msg: 'Hello Vue',
name:'Michael'
},
filters:{
myTextTransform: function (myInput,isUpper) {
if(isUpper)
{
return myInput.toUpperCase();
}
else{
return myInput.toLowerCase();
}
}
}
})
{{msg}}
new Vue({
el:"#container",
data:{
msg:"Hello VueJs",
price:356
},
//过滤器的本质 就是一个有参数有返回值的方法
filters:{
myCurrency:function(myInput){
var result = "$"+myInput;
return result;
}
}
})
最后一个例子是写死的。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~