vue自定义过滤器创建和使用方法详解

作者：匿名的girl 时间：2024-05-09 15:17:06　

本文实例为大家分享了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>

最后一个例子是写死的。

来源：http://www.cnblogs.com/wangruifang/p/7765562.html

标签：vue,过滤器

投稿

vue自定义过滤器创建和使用方法详解

猜你喜欢

asp之自动闭合HTML/ubb标签函数+简单注释

Python Tornado核心及相关原理详解

如何安装MySQL Community Server 5.6.39

python如何查看系统网络流量的信息

mysql 8.0.12 安装配置方法图文教程

总结一些你可能不知道的ip地址

微信小程序实现人脸识别对比

Navicat配置mysql数据库用户权限问题

在Python的Flask中使用WTForms表单框架的基础教程

python绘制多个曲线的折线图

Python中的MongoDB基本操作：连接、查询实例

移动测试开发Mitmproxy用于测试抓包神器详解

Python实现的十进制小数与二进制小数相互转换功能

pymssql数据库操作MSSQL2005实例分析

在PyCharm下打包*.py程序成.exe的方法

Python列表中多元素删除(移除)的实现

Pyqt QImage 与 np array 转换方法

JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍

使用Python获取并处理IP的类型及格式方法

Python光学仿真教程实现光线追踪