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 相关文章推荐
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 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
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
js实现3D旋转效果
2020/08/18 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
python自动重试第三方包retrying模块的方法
2018/04/24 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
python移位运算的实现
2019/07/15 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
关于环保的建议书
2014/05/12 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技