vue.js-过滤器 filters使用详细示例
什么也不说了,直接上干货:
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使用详细示例的更多相关文章
- Vue学习之--------Vue中过滤器(filters)的使用(代码实现)(2022/7/18)
1.过滤器 1.1 概念 过滤器: 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理). 语法: 1.注册过滤器:Vue.filter(name,callback) 或 new V ...
- VUE -- vue.js中$watch的用法示例
Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch( ...
- vue.js中$watch的用法示例
Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch( ...
- vue使用过滤器 filters:{}
在项目开发过程中,经常会用到过滤器,下面就来说说我用的用法 我从后台获取到一个时间字段,是2017-03-23的格式,但是我要的是年月日分开显示,那就要用到过滤器了 在没有用过滤器的时候,是这样的: ...
- Vue.js -- 过滤器
VueJs中的过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/ ...
- vue.js过滤器
import Vue from 'vue' import { ENV } from '@/config/conf' const dateFormat = (str) => { var date ...
- vue中过滤器filters的使用
组件内写法 filters:{ filter:function(data,arg1,arg2){ return .... } } 全局写法 filters('filter',function(data ...
- 第5章-Vue.js交互及生命周期练习
一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用 (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法 (重点) 二.仿写留言板 2.1.实现" ...
- 第4章-Vue.js 交互及实例的生命周期
一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...
随机推荐
- linux学习记录.4.常用命令
帮助command --help 获取‘command‘命令的帮助 目录与文件 cd /home 进入‘home’目录 cd .. 返回上一级目录 cd 进入个人目录 c ...
- 网页中嵌入swf文件的几种方法
1. object + embed 传统的方法 优点:浏览器兼容性好,是 Macromedia 一直以来的官方方法缺点:a.embed 标签是不符合 W3C 的规范的,无法通过验证.当然, ...
- phpStudy apache无法启动 apache启动后又停止
一.是防火墙拦截: 二.是80端口已经被别的程序占用,如IIS,迅雷等: 三.是没有安装VC9运行库,php和apache都是VC9编译: 四.虚拟机配置路径中有中文: 五.在检测端口后强制重启 把配 ...
- LINUX修改、增加IP的方法,一张网卡绑定多个IP/漂移IP【转】
临时增加IP命令:ifconfig eth0:1 ip地址 netmask 子网码 broadcast 广播地址 gateway 网关 ifconfig eth0:1 10.1.104.65 net ...
- python使用twisted搭建的一个socket服务
服务端 # -*- coding: utf-8 -*- # @Time : 2018/9/19 21:41 # @Author : cxa # @File : tsTservTW.py # @Soft ...
- python 中的__del__
# -*- coding: utf-8 -*- # @Time : 2018/9/19 20:21 # @Author : cxa # @File : delDemo.py # @Software: ...
- MySQL分页存储过程
CREATE PROCEDURE ProcPage(in tableName varchar(20),#表名 in showField varchar(100),#要显示的列名 in whereT ...
- Discuz x3.2七牛远程附件设置
一.DISCUZX2.5/3/3.1云存储通用接口1.1.0beta版本[8.22最新更新] 链接地址:http://www.discuz.net/thread-3399569-1-1.html 本帖 ...
- dc
http://www.cnblogs.com/yjmyzz/p/docker-install-tutorial.html https://segmentfault.com/a/119000000510 ...
- Motan
https://github.com/weibocom/motan/wiki/zh_userguide http://www.cnblogs.com/mantu/p/5885996.html(源码分析 ...