什么也不说了,直接上干货:

1.首先,获取后台数据到页面,并调用过滤器

在<script>中添加
onRefreshItems (currentPage, perPage) {
if (this.dataUrl) {
this.$http.get(this.dataUrl, {params: {page: currentPage, size: perPage}}).then(res => {
let labels = []
for (var i = 0; i < res.data.length; i++) {
let item = res.data[i]
item.status = report.formatStatus(item.status)
labels.push(item)
}
this.items = labels
})
}
}, 2.添加过滤器,在<script>中添加
filters: {
formatStatus (status) {
return report.formatStatus(status)
}
} 3.编写js文件(report.js)
export default {
formatStatus (status) {
if (status === 'TO_BE_PUT_INTO_STORAGE') {
status = '未入库'
} else if (status === 'PARTIAL_ARRIVAL') {
status = '月台部分收货'
} else if (status === 'WAREHOUSING_COMPLETION') {
status = '已全部入库'
} else if (status === '') {
status = ''
}
return status
}
}
4.引入
import report from '@/components/Table/report.js'

如有错误欢迎留言指点,谢谢

vue.js-过滤器 filters使用详细示例的更多相关文章

  1. VUE -- vue.js中$watch的用法示例

    Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch( ...

  2. vue.js中$watch的用法示例

    Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch( ...

  3. vue使用过滤器 filters:{}

    在项目开发过程中,经常会用到过滤器,下面就来说说我用的用法 我从后台获取到一个时间字段,是2017-03-23的格式,但是我要的是年月日分开显示,那就要用到过滤器了 在没有用过滤器的时候,是这样的: ...

  4. Vue.js -- 过滤器

    VueJs中的过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/ ...

  5. vue.js过滤器

    import Vue from 'vue' import { ENV } from '@/config/conf' const dateFormat = (str) => { var date ...

  6. vue中过滤器filters的使用

    组件内写法 filters:{ filter:function(data,arg1,arg2){ return .... } } 全局写法 filters('filter',function(data ...

  7. 第5章-Vue.js交互及生命周期练习

    一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用  (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法  (重点) 二.仿写留言板 2.1.实现" ...

  8. 第4章-Vue.js 交互及实例的生命周期

    一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...

  9. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

随机推荐

  1. Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

    Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...

  2. Java I/O操作学习笔记

    书上写的有点乱,所以就自己总结了一下,主要参考:http://www.cnblogs.com/qianbi/p/3378466.html 1.从文件读出和写入: import java.io.*; i ...

  3. jQuery效果-滑动

    index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  4. [置顶] 【GBT28181开发:SIP协议实践】之设备远程启动

    下面学习的是设备远程控制的流程,和设备信息.设备目录.设备状态的流程差不多,主要是描述的协议字段不同,模拟SPVMN系统向源设备发送远程启动控制指令,记录下交互的消息,详细研究了下: 转载请注明出处: ...

  5. Javascript和HTML dom

    今天在看DOM那一章的时候突然想到一个问题,众所周知的js的数据类型有两种:原始类型和对象类型.其中原始类型又包括以下几种类型:数字型.字符串型.布尔值.null和undefined.其中对象类型包括 ...

  6. 解决SQLServer 2008 日志无法收缩,收缩后大小不改变

    问题 数据库日志文件上G,或者几十G了,使用日志收缩,和日志截断收缩都不管用.体积一直减不下来.. 解决方案 查看日志信息 在查询分析器中执行如下代码来查看日志信息:  DBCC LOGINFO('数 ...

  7. Java与算法之(7) - 完全二叉树

    树 下图是一"棵"树的样子.树这个名称起的很形象,整个数据结构由根.枝.叶组成,其中1为根节点,2.3是1的子节点,4.5.6.8.9.10这几个没有子节点的节点称为叶节点. 节点 ...

  8. 【Topcoder 8572】TheLuckySum

    题意:给一个数\(n\),要把它分成lucky numbers的和. 问个数最少.字典序最小的方案. 思路:果断搜索.个数最少,所以迭代加深.枚举要的个数\(m\). 首先我们看\(n\)的个位.它肯 ...

  9. 利用Django中的url方法实现地址动态拼接自动生成超链接地址

    目标 建立一个图书列表页面,显示图书名列表,并实现点击书名跳转到图书详细页面,显示图书详细信息. URL方法简介 功能:返回一个绝对路径的引用(不包含域名的URL):该引用匹配一个给定的视图函数和 一 ...

  10. SSH管理(重启 停止 运行 安装)centos7

    下面整理经常用到管理SSH服务的命令,方便复制哈. SSH服务状态 systemctl status sshd.service SSH运行命令 service sshd start SSH重启命令 s ...