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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
vue使用video插件vue-video-player的示例
Oct 03 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
CI框架安全类Security.php源码分析
2014/11/04 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
PHP输出日历表代码实例
2015/03/27 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
Python 专题四 文件基础知识
2017/03/20 Python
Python实现调度算法代码详解
2017/12/01 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
django实现支付宝支付实例讲解
2019/10/17 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
《理想的风筝》教学反思
2014/04/11 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
教师年度个人总结
2015/02/11 职场文书
综合素质自我评价评语
2015/03/06 职场文书
2015年组织部工作总结
2015/04/03 职场文书
运动会5000米加油稿
2015/07/21 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
vue elementUI表格控制对应列
2022/04/13 Vue.js