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 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
js 鼠标点击事件及其它捕获
Jun 04 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
PHP递归创建多级目录
2015/11/05 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
数控专业大学生的自我鉴定
2013/11/13 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
七一表彰大会简报
2015/07/20 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
python 实现图片特效处理
2022/04/03 Python
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL