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 相关文章推荐
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
js 数组 fill() 填充方法
Nov 02 Javascript
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
php2html php生成静态页函数
2008/12/08 PHP
PHP nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
PHP模块化安装教程
2016/06/01 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
解读Python编程中的命名空间与作用域
2015/10/16 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
python生成器推导式用法简单示例
2019/10/08 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
食品安全承诺书
2014/05/22 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python