位置: IT常识 - 正文

Vue2中过滤器的用法详解(vue过滤器可以异步吗)

编辑:rootadmin
Vue2中过滤器的用法详解

目录

一、过滤器的概念

二、过滤器的使用位置

三、过滤器的分类

1、全局过滤器

2、本地过滤器

四、过滤器应用实例

1、使用过滤器实现省略号

2、使用过滤器处理时间戳

五、Vue3中已废弃过滤器 


推荐整理分享Vue2中过滤器的用法详解(vue过滤器可以异步吗),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端vue过滤器,vue过滤器封装,vue.js过滤器,vue3过滤器,前端vue过滤器,vue中过滤器的使用,vue3过滤器,vue过滤器用法,内容如对您有帮助,希望把文章链接给更多的朋友!

过滤器是vue中的一个特性,作用是用于对文本进行格式化的作用。分为全局过滤器和私有过滤器(本地过滤器)2种。这篇文章介绍了Vue2中的过滤器filter使用方法及注意说明,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下。

一、过滤器的概念

过滤器(Filters)是 vue 为开发者提供的功能,常用于文本的格式化。

过滤器可以用在两个地方:插值表达式和 v-bind 属性绑定。

过滤器应该被添加在 JavaScript 表达式的尾部,由“管道符”进行调用。

注意:在vue 1.0中有内置的过滤器,在2.0中去掉了内置过滤器,只有自定义过滤器 

二、过滤器的使用位置

过滤器只能应用在两个地方:双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。例如:

<!--在双花括号中使用 格式:{{值 | 过滤器的名称}}--><div>{{3 | addZero}}</div><!--在v-bind中使用 格式:v-bind:id="值 | 过滤器的名称"--><div v-bind:id="1 | addZero">11</div>

关于Vue2中的过滤器

👉 什么是vue的过滤器  

过滤器可以通俗理解成是一个特殊的方法,用来加工数据的。

比如枚举值可以使用过滤器:如 1 2 3 4 对应 成功 失败 进行中 已退回 比如价格后面跟个过滤器,将价格格式化成小数点两位 比如时间格式化等,又比如可以过滤聊天中的某些脏话。

👉 如何写过滤器?

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>过滤器</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js"></script> <script> window.onload = function () { // 定义全局过滤器 Vue.filter("contentFilter", function (value) { //全局过滤器 if (!value) { return ""; } return value .toUpperCase() .replace("TMD", "*不许说脏话噢*") .replace("SB", "*不许说脏话噢*"); }); Vue.filter("addZero", function (value) { // 如果value的值小于10则在前面添加0然后返回,否则直接返回value值 return value < 10 ? "0" + value : value; }); // 构建vue实例 new Vue({ el: "#app", data: { content: "小伙子,TMD就是个sb", num1: 40, num2: 60, num3: 70, }, filters: { //局部过滤器(本地过滤器) add(n1, n2, n3) { return n1 + n2 + n3; }, }, }); }; </script> </head> <body> <div id="app"> <h3>过滤器基本使用</h3> <!--在双花括号中使用全局过滤器 格式:{{值 | 过滤器的名称}}--> <p>{{content|contentFilter}}</p> <!--在v-bind中使用全局过滤器 格式:v-bind:id="值 | 过滤器的名称"--> <p v-bind:id="1 | addZero">11</p> <h3>过滤器接收参数</h3> <p>{{ num1| add(num2,num3)}}</p> </div> </body></html>

运行结果:

三、过滤器的分类

过滤器分为以下两种类型:

1、全局过滤器

多个 vue 实例之间共享过滤器,就可以定义全局过滤器

示例代码如下:

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>过滤器</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js"></script> <script> window.onload = function () { // 定义全局过滤器 Vue.filter("addZero", function (value) { // 如果value的值小于10则在前面添加0然后返回,否则直接返回value值 return value < 10 ? "0" + value : value; }); // 构建vue实例 new Vue({ el: "#my", data: {}, // 方法 methods: {}, }); }; </script> </head> <body> <div id="my"> <!--在双花括号中使用全局过滤器 格式:{{值 | 过滤器的名称}}--> <div>{{3 | addZero}}</div> <div>{{15 | addZero}}</div> <!--在v-bind中使用全局过滤器 格式:v-bind:id="值 | 过滤器的名称"--> <div v-bind:id="1 | addZero">11</div> <div v-bind:id="12 | addZero">15</div> </div> </body></html>

运行效果:

关于全局过滤器的说明

如果希望在多个 vue 实例之间共享过滤器,则可以按照如下的格式定义全局过滤器

2、本地过滤器

在 filters 节点下定义的过滤器,称为“私有过滤器”,因为它只能在当前 vm 实例所控制的 el 区域内使用。——要定义到 filters 节点下,本质是一个函数

Vue2中过滤器的用法详解(vue过滤器可以异步吗)

 (1)在插值表达式或v-bind属性中使用 管道符

(2)在vue实例的 filters 节点中定义过滤方法 

 

示例代码如下: 

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>过滤器</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js" ></script> <script> window.onload=function(){ // 定义全局过滤器 Vue.filter("addZero",function(value){ // 如果value的值小于10则在前面添加0然后返回,否则直接返回value值 return value<10?"0"+value:value; }); // 构建vue实例 new Vue({ el:"#my", data:{ }, // 方法 methods:{ }, // 定义本地过滤器 filters:{ roundNum:function(value){ // 四舍五入 小数点后保留两位 return value.toFixed(2); }, roundNumWithPara:function(value,digit){ // 根据digit返回相应位数的小数 return value.toFixed(value,digit); } } }) } </script></head><body> <div id="my"> <!--在双花括号中使用全局过滤器 格式:{{值 | 过滤器的名称}}--> <div>{{3 | addZero}}</div> <div>{{15 | addZero}}</div> <!--在v-bind中使用全局过滤器 格式:v-bind:id="值 | 过滤器的名称"--> <div v-bind:id="1 | addZero">11</div> <div v-bind:id="12 | addZero">15</div> <!--使用本地过滤器--> <div>原始值:3.1415926,过滤后的值:{{3.1415926 | roundNum}}</div> <!--保留小数点后3位--> <div>原始值:3.1415926,过滤后的值:{{3.1415926 | roundNumWithPara(3)}}</div> </div></body></html>

运行效果:

💠 过滤器的注意点:

👉🏻 当全局过滤器和局部过滤器重名时,会采用局部过滤器。——即此时会按照“就近原则”,调用的是”私有过滤器“。

👉🏻 局部过滤器优先于全局过滤器被调用。

👉🏻 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右。

👉🏻 在过滤器函数中,一定要有 return 值。

👉🏻 在过滤器的形参中,可以获取到“管道符”前面待处理的那个值。

四、过滤器应用实例1、使用过滤器实现省略号

代码示例如下:

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>使用过滤器实现省略号</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js"></script> <script> window.onload = function () { // 构建vue实例 new Vue({ el: "#my", data: { msg: "hello world", }, // 方法 methods: {}, // 定义本地过滤器 filters: { // 显示省略号 toShowEllipsis: function (value, len) { if (value === "" || value === undefined || value === null) return; if (value.length >= len) { var str = value.substr(0, len); return str + "..."; } else { return value; } }, }, }); }; </script> </head> <body> <div id="my"> <!--添加省略号 12345...--> <input type="text" v-model="msg" /> {{msg | toShowEllipsis(6)}} </div> </body></html>

运行效果:

2、使用过滤器处理时间戳

代码示例如下:

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>使用过滤器处理时间戳</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js"></script> <script> window.onload = function () { // 构建vue实例 new Vue({ el: "#my", data: { curTime: 1546181790, }, // 方法 methods: {}, // 定义本地过滤器 filters: { // 处理时间戳 将时间戳转换成具体时间 toTimeStamp: function (value) { //d 表示日期 t 日期和时间 var d = new Date(value * 1000); return ( d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() ); }, }, }); }; </script> </head> <body> <div id="my"> <!--时间戳--> <p>当前时间:{{curTime | toTimeStamp }}</p> </div> </body></html>

运行效果:

五、Vue3中已废弃过滤器 

👋🏻 注意:filter方法在vue3中已被废除 

vue3要精简代码,并且filter功能重复,filter能实现的功能,methods和计算属性基本上也可以实现。把filter这方面的vue源码给删掉,这样更加方便维护。

例如

使用 computed 实现

<template> <div id="app"> <ul v-for="(item, index) in arr" :key="index"> <li>快递公司:{{ item.deliverCompany }}</li> <!-- 使用计算属性 --> <li>运输状态:{{ computedText(item.expressState) }}</li> </ul> </div></template><script> export default { data() { return { arr: [ { deliverCompany: "京东快递", expressState: "1", }, { deliverCompany: "顺丰快递", expressState: "2", }, { deliverCompany: "中通快递", expressState: "3", }, { deliverCompany: "邮政快递", expressState: "4", }, { deliverCompany: "极兔快递", expressState: "5", }, { deliverCompany: "某某快递", expressState: null, }, ], }; }, computed: { computedText() { // 计算属性要return一个函数接收参数 return function (state) { switch (state) { case "1": return "待发货"; break; case "2": return "已发货"; break; case "3": return "运输中"; break; case "4": return "派件中"; break; case "5": return "已收货"; break; default: return "快递信息丢失"; break; } }; }, }, };</script>

使用methods实现

<template> <div id="app"> <ul v-for="(item, index) in arr" :key="index"> <li>快递公司:{{ item.deliverCompany }}</li> <!-- 使用方法 --> <li>运输状态:{{ methodsText(item.expressState) }}</li> </ul> </div></template><script> export default { data() { return { arr: [ { deliverCompany: "京东快递", expressState: "1", }, { deliverCompany: "顺丰快递", expressState: "2", }, { deliverCompany: "中通快递", expressState: "3", }, { deliverCompany: "邮政快递", expressState: "4", }, { deliverCompany: "极兔快递", expressState: "5", }, { deliverCompany: "某某快递", expressState: null, }, ], }; }, methods: { methodsText(state) { switch (state) { case "1": return "待发货"; break; case "2": return "已发货"; break; case "3": return "运输中"; break; case "4": return "派件中"; break; case "5": return "已收货"; break; default: return "快递信息丢失"; break; } }, }, };</script>

本文链接地址:https://www.jiuchutong.com/zhishi/299722.html 转载请保留说明!

上一篇:计算机视觉——图像视觉显著性检测(计算机视觉的应用)

下一篇:学习笔记:深度学习(2)——BP神经网络

  • 顺丰怎么寄快递上门取件(顺丰怎么寄快递便宜)

    顺丰怎么寄快递上门取件(顺丰怎么寄快递便宜)

  • 华为nova如何关闭后台应用程序(华为nova如何关闭开发者模式)

    华为nova如何关闭后台应用程序(华为nova如何关闭开发者模式)

  • 华为matebook13有蓝牙功能吗(华为matebook13有摄像头吗)

    华为matebook13有蓝牙功能吗(华为matebook13有摄像头吗)

  • 在快手买的东西申请退款什么时候给退(在快手买的东西怎么查看取件码)

    在快手买的东西申请退款什么时候给退(在快手买的东西怎么查看取件码)

  • 小米解锁绑定验证失败(小米解锁绑定验证怎么弄)

    小米解锁绑定验证失败(小米解锁绑定验证怎么弄)

  • nceal10是什么机型(nceal00)

    nceal10是什么机型(nceal00)

  • 挂烫机灯不亮了也不工作了怎么回事(挂烫机灯不亮了怎么维修)

    挂烫机灯不亮了也不工作了怎么回事(挂烫机灯不亮了怎么维修)

  • 微信群主是第一个吗(微信群主是第一个头像吗)

    微信群主是第一个吗(微信群主是第一个头像吗)

  • 支付宝限制7天怎么弄(支付宝限制7天后,还能恢复吗)

    支付宝限制7天怎么弄(支付宝限制7天后,还能恢复吗)

  • 历代iphone信号对比(苹果各代信号对比)

    历代iphone信号对比(苹果各代信号对比)

  • 领取红包封面序列号是什么意思(领取红包封面序列号的号码是多少)

    领取红包封面序列号是什么意思(领取红包封面序列号的号码是多少)

  • 电脑r5和r7是什么意思(电脑r5r7有什么区别)

    电脑r5和r7是什么意思(电脑r5r7有什么区别)

  • 笔记本可以外接摄像头吗(笔记本可以外接显卡打游戏吗)

    笔记本可以外接摄像头吗(笔记本可以外接显卡打游戏吗)

  • 华为p30pro内存卡插什么地方(华为p30pro内存卡不显示)

    华为p30pro内存卡插什么地方(华为p30pro内存卡不显示)

  • 反锯齿效果是什么(反锯齿none)

    反锯齿效果是什么(反锯齿none)

  • 苹果iOS12增加了哪些新的功能(iphone12增加了什么)

    苹果iOS12增加了哪些新的功能(iphone12增加了什么)

  • honorplay3是什么型号(honorplay3是什么意思)

    honorplay3是什么型号(honorplay3是什么意思)

  • oppoa11x支不支持5g网络 (oppoa11x支不支持5g)

    oppoa11x支不支持5g网络 (oppoa11x支不支持5g)

  • nec是什么牌子的电脑(nec是什么牌子的电动车)

    nec是什么牌子的电脑(nec是什么牌子的电动车)

  • 小米9有没有反向充电(小米有没有反监听设备)

    小米9有没有反向充电(小米有没有反监听设备)

  • ipados分屏怎么关掉(ipados15关闭分屏)

    ipados分屏怎么关掉(ipados15关闭分屏)

  • 怎样在快手上买东西(怎样在快手上买正品服装)

    怎样在快手上买东西(怎样在快手上买正品服装)

  • 余额宝账单明细怎么删除(余额宝账单明细只显示消费为什么)

    余额宝账单明细怎么删除(余额宝账单明细只显示消费为什么)

  • 电脑截图是ctrl加什么(电脑截图是存在哪里的)

    电脑截图是ctrl加什么(电脑截图是存在哪里的)

  • Windows11怎么快速锁屏?Win11锁屏密码设置教程(windows11怎么快速截屏)

    Windows11怎么快速锁屏?Win11锁屏密码设置教程(windows11怎么快速截屏)

  • 九斑蛾,瑞士 (© Thomas Marent/Minden Pictures)

    九斑蛾,瑞士 (© Thomas Marent/Minden Pictures)

  • 增值税发票平台怎么下载已认证发票
  • 建筑业固定资产折旧费用科目是什么
  • 合伙企业的税收优势
  • 工资可以直接进管理费用吗
  • 红字专用发票信息表用什么纸打印
  • 开发票 专业设计服务
  • 个体工商户经营范围查询
  • 支付增值税税控系统技术维护费用500元
  • 外商投资企业是民营企业吗
  • 无偿赠送货物怎么做账
  • 新办商贸企业一般纳税人合同金额
  • 支付退货款现金流怎么做
  • 多借多贷的会计分录格式
  • 五证合一流程
  • 企业搬迁补偿款发放流程
  • 网银年费属于财务费用哪一项
  • 工业企业增值税缓交政策
  • 小规模纳税人差额征税
  • 会务费能开发票吗
  • 该期已经申报此税种且数据已提交,不能预约扣款
  • 纯利润和毛利润哪个多
  • 公司投资另一家公司怎么做科目
  • 购入增值税税控系统专用设备为什么全额计入固定资产
  • 高新技术企业研发费
  • 公司购进的商品自己用的,税金怎么走账
  • 查账征收企业所得税季报怎么填
  • 收取拆迁补偿费会计分录
  • 电脑折旧率计算公式
  • 汇算清缴是什么时间
  • 项目的投入资金预算表
  • 将u盘格式化
  • 三防手机厂商
  • 企业个人借款利息怎么做账
  • 支付手续费委托代销是什么意思
  • 国家差旅费报销最新标准住宿
  • uni-app实例教程
  • 财务人员如何管控费用支出
  • realsense d415参数
  • php 加密
  • php函数名
  • vue框架教程视频
  • golang char
  • 建筑行业预交增值税怎么结转
  • 制药企业客户退货流程
  • 固定资产停止使用还要折旧吗
  • 不动产租赁专票对房产有无影响
  • db2 -x
  • 企业研发费用可以抵税吗
  • PostgreSQL教程(六):函数和操作符详解(2)
  • 企业所得税多预缴了怎么办
  • 营业总收入和营业利润
  • 或有资产怎么处理
  • 车辆维修费会计分录
  • 交易性金融资产包括哪些项目
  • 增值税小规模纳税人2023年政策
  • 当月的印花税需要交吗
  • 暂估成本跨年后收到票如何处理,红冲按哪个金额冲
  • 上年度会计凭证怎么填
  • 发票金额比实际支付金额大
  • 财税2009年87号文废止
  • mysql数据库开发技术
  • win2000服务器
  • debian iso
  • XP系统怎么设置屏幕常亮
  • windows下部署phpipam
  • linux支持哪些类型的设备
  • [置顶]电影名字《收件人不详》
  • android开发中遇到的问题
  • 提高网页的效率的方法有
  • nodejs cicd
  • linux 环境 mysql写入中文报错
  • scrollview不滚动
  • python 描述符类
  • unity3d怎么用
  • 重庆市房产交易信息网
  • 不用税控盘可以清卡吗
  • 广西电子税务局电话人工客服电话
  • 公交爱心卡需要每年审吗
  • 广东地税服务电话
  • 深圳宝安到揭阳大巴
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设