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 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
vue中的计算属性实例详解
Sep 19 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
php cli配置文件问题分析
2015/10/15 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
百度地图api如何使用
2015/08/03 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
Django数据库操作之save与update的使用
2020/04/01 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
为什么会有内存对齐
2016/10/10 面试题
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
十佳少年事迹材料
2014/12/25 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
Python+Appium新手教程
2021/04/17 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python