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 相关文章推荐
JS 判断undefined的实现代码
Nov 26 Javascript
js 自动播放的实例代码
Nov 19 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
js获取json元素数量的方法
Jan 27 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
简述vue中的config配置
Jan 23 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
vue-cli构建项目下使用微信分享功能
May 28 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 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
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
用Django写天气预报查询网站
2018/10/21 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
python爬取youtube视频的示例代码
2021/03/03 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
修理厂厂长岗位职责
2014/01/30 职场文书
高中学生评语大全
2014/04/25 职场文书
基层党支部整改方案
2014/10/25 职场文书
爱心捐款感谢信
2015/01/20 职场文书
技术负责人岗位职责
2015/02/10 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
入党自传范文2015
2015/06/26 职场文书
诚实守信主题班会
2015/08/13 职场文书
医学会议开幕词
2016/03/03 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
python 下划线的多种应用场景总结
2021/05/12 Python