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


Posted in Javascript onNovember 06, 2017

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

最后一个例子是写死的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 #Javascript
vue复合组件实现注册表单功能
Nov 06 #Javascript
基于vue组件实现猜数字游戏
May 28 #Javascript
vue路由嵌套的SPA实现步骤
Nov 06 #Javascript
vue综合组件间的通信详解
Nov 06 #Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 #Javascript
详解基于vue-cli优化的webpack配置
Nov 06 #Javascript
You might like
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
php获取远程文件内容的函数
2015/11/02 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
代码实例讲解python3的编码问题
2019/07/08 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
信仰观后感
2015/06/03 职场文书
增值税发票丢失证明
2015/06/19 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
Python多线程 Queue 模块常见用法
2021/07/04 Python