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引用指针使用介绍
Nov 07 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
Django+Vue跨域环境配置详解
Jul 06 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
原生js实现购物车
Sep 23 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连接MySQL代码的参数说明
2008/06/07 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
js中this的用法实例分析
2015/01/10 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
python实现ping的方法
2015/07/06 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
用python处理MS Word的实例讲解
2018/05/08 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
django Admin文档生成器使用详解
2019/07/22 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
应聘会计求职信
2014/06/11 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
医生个人年度总结
2015/02/28 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
pt-archiver 主键自增
2022/04/26 MySQL