vue定义全局过滤器
时间:2021-09-01
本文章向大家介绍vue定义全局过滤器,主要包括vue定义全局过滤器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、定义全局过滤器
1、src下新建文件夹utils,下面新建filter.js
import Vue from 'vue' // 个人中心-支付状态 Vue.filter('paymentMethod', value => { switch (value) { case 1: return '微信支付' case 2: return '会员充值' case 3: return '钱包支付' default: return '其他' } })
2、在main.js中引入使用
import '@/common/utils/filter.js';// 全局过滤器
3、使用
// 在双花括号插值 {{ value | paymentMethod }}
二、filter过滤器(多参数)传参
1、传1个参数
// html {{a1 | filterAa}}
// js filters:{ filterAa(a1){ // a1是传入的参数 } }
2、传2个参数
// html {{a1 | filterAa(a2)}} // js filters:{ filterAa(a1,a2){ // a1是传入的第一个参数 // a2是传入的第二个参数 } }
3、传3个参数
// html {{a1 | filterAa(a2,a3)}} // js filters:{ filterAa(a1,a2,a3){ // a1是传入的第一个参数 // a2是传入的第二个参数 // a3是传入的第三个参数 } }
三、过滤器在js中使用
this.$options.filters["thousand"](要处理的数据) this.$options.filters.formatDate(val);
注意:
1、 当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!
2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右。
原文地址:https://www.cnblogs.com/zjianfei/p/15215085.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- scheduler-设计与实现
- 3分钟短文:太爽了,用Laravel写API接口!
- Spring mvc文件上传实现
- 「Mysql优化大师三」查询执行计划explain详解,含案例
- flutter BottomAppBar实现不规则底部导航栏
- Yarr:一个UI很漂亮的RSS阅读器
- kotlin Standard中的内联函数示例详解
- 解决react-native软键盘弹出挡住输入框的问题
- flutter编写精美的登录页面
- Flutter实现App功能引导页
- Flutter底部不规则导航的实现过程
- Flutter实现用视频背景的登录页的示例代码
- Flutter实现可循环轮播图效果
- Android判断登录情况
- linux尝试登录失败后锁定用户账户的两种方法