Vue项目引发的「过滤器」使用教程


Posted in Javascript onMarch 12, 2019

前言

最近在项目的开发中,出现一些格式化数据的情况,比如字母的大小写,比如一些价格的数据格式。等等一些格式的显示。

Name Price
BTC $3896.23
ETH $136.64

在上面的表格中,我们需要处理数据的显示。这是我们时常遇到的情况。

通常我们会直接处理数据的输出,可以这么做。

computed: {
 result() {
 return this.prices.map(price => "$" + price);
 }
}

这些都是通过修改数据做到的。

不过,Vue 中给我们提供了一种格式化数据功能「过滤器」。

filters 与 计算属性(computed),方法(methods)不同的是,filters 不会修改数据,只是改变用户看到的输出。Vue 从 2.0 版本之后去除了内置的「过滤器」。所以我们在使用时需要自己去定义。

接下来,我们就来看看看在 Vue 中如何使用「过滤器」。

首先过滤器可以用在两个地方:差值表达式 {{ }} 和 v-bind 表达式,然后由管道操作符“ | ”进行指示。

知道在什么地方时候,那我们就再来看看如何定义过滤器。我们有两种方式定义。

本地过滤器

我们可以把过滤器定义在当前使用的组件内。我们利用过滤器来修改上面的表格输出格式。

{{price.price | currency}}

filters: {
 currency(value) {
  return "$" + value;
 }
}

全局过滤器

这里需要注意的是,使用全局过滤器时,必须要在 Vue 的实例之前。

Vue.filter("currency", function (value) {
 return "$" + value;
});


new Vue({
 //...
})

此时,我们就可以愉快的在组件中使用过滤器了。

用户体验是非常重要的一个环节,我们可以利用过滤器去优化。通常利用表格展示数据时,你无法保证每个字段的属性值都是存在且合理的。

这时就可以利用「过滤器」。把不合理的值显示为 “--”,这是最为常见的手段。

filters: {
 filterPrice(value) {
  return value ? value : "--";
 }
}

过滤器参数

过滤器会把表达式中的值始终当作函数的第一个参数。由于过滤器是一个函数,所以我们也可以额外的传入参数。

{{ data | filterPrice(arg1, arg2) }}

比如我们把上面的案例修改一下,我们不仅仅需要把美元格式化,我们还需要格式化人民币等等,很多种的符号,这时就可以利用传参的方式。

{{price.price | filterPrice('$')}}

filters: {
 filterPrice(price, prefix) {
  return prefix + price;
 }
}

除此之外,「过滤器」还可以进行串联使用。

{{ data | filterA | filterB }}

串联使用时,会把第一个产生的结果,作为参数传递给第二个过滤器使用,以此类推。

好了今天我们 Vue 的过滤器就说到这,大家不妨多多尝试下在项目中使用,提高我们的开发效率,不能总是想着去修改数据,这些功能与套路有时会发挥很好的价值。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
jquery动态添加option示例
Dec 30 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
通过JS运行机制的角度说说作用域
Mar 12 #Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 #jQuery
如何使用pm2快速将项目部署到远程服务器
Mar 12 #Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 #Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 #Javascript
javascript中数组的常用算法深入分析
Mar 12 #Javascript
详解javascript 变量提升(Hoisting)
Mar 12 #Javascript
You might like
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
python2与python3共存问题的解决方法
2018/09/18 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
解决Python二维数组赋值问题
2019/11/28 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
大学生旷课检讨书
2014/01/22 职场文书
中英文求职信范文
2014/01/27 职场文书
进步之星获奖感言
2014/02/22 职场文书
公务员诚信承诺书
2014/05/26 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
商场消防安全责任书
2014/07/29 职场文书
施工员岗位职责
2015/02/10 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
委托书范本格式
2019/04/18 职场文书