第一种：全局写法，在main.js里面加入

// 【全局过滤】----------------------------------------//转换情况一的日期
Vue.filter('yyyy_MM_dd', v => {if (v) return new Date(v).toLocaleString("zh-Hans-CN", {year: "numeric",month: "2-digit",day: "2-digit",}).replace(/\//g, "-");else return '';
});//转换情况二的百分数
Vue.filter('percent', v => {if (v) return  Math.abs(v.toFixed(2)) + "%";else return 0;
});

第二种：本地写法，在vue文件页面的<script></script>里面加入

  filters: {//转换情况一的日期yyyy_MM_dd: (v) => {if (v)return new Date(v).toLocaleString("zh-Hans-CN", {year: "numeric",month: "2-digit",day: "2-digit",}).replace(/\//g, "-");else return "";},//转换情况二的百分数percent: (v) => {if (v) return Math.abs(v.toFixed(2)) + "%";else return 0;},},

然后在绑定对应数据的地方用竖线“|”跟上对应的过滤方法就可以了

{{ 日期 | yyyy_MM_dd }}
{{ 小数 | percent }}/*额外知识：
过滤器还支持串联，也就是多个 | filterName | filterName | ... 这样可以综合在一起使用多个过滤功能。过滤器是 JavaScript 函数，因此可以接收参数：
{{ string | filter('参数1', 参数2) }}
这里，filter被定义为接收三个参数的过滤器函数。其中 string 的值作为第一个参数，普通字符串 '参数1' 作为第二个参数，表达式 参数2 的值作为第三个参数。*/

使用Vue的filters(本地)或filter(全局)过滤常用数据类型相关推荐

带你掌握Vue过滤器filters及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
vue-cli快速构建vue项目和本地模拟请求数据
Vue-cli快速构建 Vue 项目和本地模拟请求数据 1 前提: 安装了 node.js 首先: 全局安装 vue-cli npm intsall vue-cli -g (-g代表全局安装) 2 使 ...
vue如何过滤html标签,Vue过滤器filters使用详解
这次给大家带来Vue过滤器filters使用详解,Vue过滤器filters使用的注意事项有哪些,下面就是实战案例,一起来看一下. 示例代码采用vue单文件组件,使用moment插件格式化日期 {{ ...
Vue使用filters过滤时不能使用this的解决办法——两次遇到了，一定要记住奥~
Vue使用filters过滤时不能使用this的解决办法 script部分 filters: {getName(val) {for (let i = 0; i < this.list.lengt ...
fiddler filters 使用（fiddler只显示指定请求，fiddler不显示指定请求，即filter请求过滤）转自：http://blog.csdn.net/notejs/article/
fiddler filters 使用(fiddler只显示指定请求,fiddler不显示指定请求,即filter请求过滤) Fiddler 有一个filters可以很好的帮助我们只显示我们关系的请求或 ...
vue怎么把api 挂载到全局_nvue实现全局挂载
前言 nvue的无法手动扩展vue.prototype导致有时想用全局挂载就无从下手. 实现思路由于nvue中的全局变量我们能找到的比较好的就是store和globalData,所以考虑在这两个上挂 ...
本地索引和全局索引的适用场景
[背景]分区表创建好了之后,如果需要最大化分区表的性能就需要结合索引的使用,分区表有两种索引:本地索引和全局索引.既然存在着两种的索引类型,相信存在即合理.既然存在就会有存在的原因,也就是在特定的场景 ...
vue中获取本地IP地址
vue中获取本地IP地址 IP地址需要通过js获取: 网上有很多查询接口可以获取到IP,查到的搜狐的比较多,我这里就用搜狐的: http://pv.sohu.com/cityjson?ie=utf-8 ...
vue缓存服务器文件到本地,vue中,在本地缓存中读写数据的方法
1.安装good-storage插件 cnpm i good-storage --save 2.读/写的方法 common/js/cache.js: import storage from 'good ...

使用Vue的filters(本地)或filter(全局)过滤常用数据类型

第一种：全局写法，在main.js里面加入

第二种：本地写法，在vue文件页面的<script></script>里面加入

使用Vue的filters(本地)或filter(全局)过滤常用数据类型相关推荐

最新文章

热门文章