vue自定义过滤器创建和使用方法详解
程序员文章站
2022-07-06 20:54:52
本文实例为大家分享了vue自定义过滤器创建和使用方法，供大家参考，具体内容如下
过滤器：生活中有很多例子，净水器 空气净化器 。
过滤器的作用：实现数据的筛选、...
本文实例为大家分享了vue自定义过滤器创建和使用方法，供大家参考，具体内容如下
过滤器：生活中有很多例子，净水器 空气净化器 。
过滤器的作用：实现数据的筛选、过滤、格式化。
vue1.*版本是有内置的过滤器，但是在vue2.*所有的版本都已经没有自带的过滤器了。
1、过滤器创建
过滤器的本质 是一个有参数 有返回值的方法
new vue({
filters:{
mycurrency:function(myinput){
return 处理后的数据
}
}
})
2、过滤器使用
语法：
<any>{{表达式 | 过滤器}}</any>
举个例子：
<h1>{{price | mycurrency}}</h1>
3、过滤器高级用法
在使用过滤器的时候，还可以指定参数，来告诉过滤器按照参数进行数据的过滤。
①如何给过滤器传参？
<h1>{{price | mycurrency('￥',true)}}</h1>
②如何在过滤器中接收到？
new vue({
filters:{
//myinput是通过管道传来的数据
//arg1在调用过滤器时在圆括号中第一个参数
//arg2在调用过滤器时在圆括号中第二个参数
mycurrency:function(myinput,arg1,arg2){
return 处理后的数据
}
}
})
代码：
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<h1>{{price}}</h1>
<h1>{{price | mycurrency('￥')}}</h1>
</div>
<script>
// 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;
}
}
})
</script>
</body>
</html>
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<h1>{{name | mytexttransform(false)}}</h1>
</div>
<script>
new vue({
el: '#container',
data: {
msg: 'hello vue',
name:'michael'
},
filters:{
mytexttransform: function (myinput,isupper) {
if(isupper)
{
return myinput.touppercase();
}
else{
return myinput.tolowercase();
}
}
}
})
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>过滤器</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<h1>{{price}}</h1>
<h1>{{price|mycurrency}}</h1>
</div>
<script>
new vue({
el:"#container",
data:{
msg:"hello vuejs",
price:356
},
//过滤器的本质 就是一个有参数有返回值的方法
filters:{
mycurrency:function(myinput){
var result = "$"+myinput;
return result;
}
}
})
</script>
</body>
</html>
最后一个例子是写死的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： jquery鼠标悬停导航下划线滑出效果
下一篇： vue复合组件实现注册表单功能