前言


  之前写过滤器的时候都是 用 if switch 来进行值的判断 返回对应的值,

  在没去百度搜索之前都是都是这样写的

 if (val == ) {
return "支付成功";
} else if (val == ) {
return "支付失败";
} else if (val == ) {
return "已发货";
} else {
return "出现错误";
}
 switch (day)
{
case :
x="Today it's Sunday";
break;
case :
x="Today it's Monday";
break;
case :
x="Today it's Tuesday";
break;
case :
x="Today it's Wednesday";
break; }

  在某天想优化一下自己代码的时候去百度搜索了一下,发现对于定义好的状态数据可以不用判断直接取值就行

  于是就有了这样的代码

  


  

 let obj = {
1:"支付成功",
2:"支付失败",
3:"已发货",
}
return obj[val]|| '未定义'

  记录走过的路,踩过的坑,互勉。

  前端交流群:87709616

有不同意见的可以留言,我们一起讨论。

【土旦】在vue filters中 优雅的使用对象的key、value来替换 if switch多重判断简化流程的更多相关文章

  1. 【土旦】vue项目中 使用 pako.js 解密 gzip加密字符串

    前言 今天跟后台对接一个接口,接受到一个加密的值,说是通过gzip加密过的,然后就蒙蔽了, 赶紧上百度找了一下资料,通过一篇文章(原文在底部)发现有个js库可以解密,就下载轻松解密了 实现代码 pok ...

  2. vue filters中使用data中数据

    vue filters中 this指向的不是vue实例,但想要获取vue实例中data中的数据,可以采用下面方法.在 beforeCreate中将vue实例赋值给全局变量app0,然后filters中 ...

  3. 如何在Vue项目中优雅的使用sass

    开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架一键安装~) 1.打开项目终端,安装sass的依赖包 npm install --save-dev sass-loader / ...

  4. 【土旦】Vue+WebSocket 实现长连接

    1.websocket 连接代码 created() { this.initWebsocket() }, methods: { // 初始化websocket initWebsocket() { le ...

  5. 如何在Vue项目中优雅的使用swiper插件

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! 开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架 ...

  6. 【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件

    问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图 解决方法: html: <input type=&quo ...

  7. [转]Vue生态系统中的库

    Vue UI组件库 Vuex vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github ...

  8. 如何在Vue中优雅的使用防抖节流

    1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...

  9. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

随机推荐

  1. 从壹开始微服务 [ DDD ] 之九 ║从军事故事中,明白领域命令验证(上)

    烽烟 哈喽大家周二好呀,咱们又见面了,上周末掐指一算,距离 圣诞节 只有 5 周的时间了(如果你还不知道为啥我要提圣诞节这个时间点,可以看看我的第二系列开篇<之一 ║ D3模式设计初探 与 我的 ...

  2. Git版本控制 —— IDE工具(IDEA)

    本文介绍使用IDEA控制Git操作 关联本地Git客户端 首先要根据系统环境安装Git客户端 然后使用File --> Settings -->  Version Control --&g ...

  3. traefik 结合 docker-compose 的快速安装及使用

    traefik 介绍 traefik 是一个为了让部署微服务更加便捷而诞生的现代HTTP反向代理.负载均衡工具. 它支持多种后台 (Docker, Swarm, Kubernetes, Maratho ...

  4. 设计模式之桥接模式——Java语言描述

    桥接适用于把抽象化和实现化解耦,使得二者可以独立变化.这种类型的设计模式属于结构性模式,它通过提供抽象化和实现化之间的桥接结构,来实现二者的解耦 这种模式设计到一个作为桥接的接口,使得实体类的功能独立 ...

  5. Android之Realm详解

    文章大纲 一.Realm介绍二.Realm实战三.Realm官方文档四.项目源码下载五.参考文章   一.Realm介绍 1. 什么是Realm   Realm 是一个手机数据库,是用来替代 SQli ...

  6. ORA-39127: 调用 "WMSYS"."LT_EXPORT_PKG"."SCHEMA_INFO_EXP" 时发生意外错误

    expdp 告警提示: Export: Release 11.2.0.4.0 - Production on 星期日 4月 28 12:14:51 2019....ORA-39127: 调用 &quo ...

  7. 在Docker中体验数据库之Microsoft SQL Server

    前面记录了一下在docker中体验mongodb和mysql.今天记录一下mssql……其实早就体验了,就是没有记录,前几天看了一下2019的一些新闻,很喜欢Polybase这个特性,想体验一把,可惜 ...

  8. CYQ.Data 支持 PostgreSQL 数据库

    前言: 很久之前,就有同学问我CYQ.Data能不能支持下PostgreSQL,之后小做了下调查,发现这个数据库用的人少,加上各种因素,就一直没动手. 前两天,不小心看了一下Github上的消息: 看 ...

  9. 视频直播 object 标签属性详解

    最近在做视频直播这一块的,html5的video不能实现此功能,在网上查找了资料,觉得很有用. 一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签.也就是OB ...

  10. java虚拟机内存区域

    java虚拟机运行时数据 程序计数器 是一块较小的内存空间,属于线程私有的内存. 用来记录正在执行的虚拟机字节码指令的地址. 每个线程都需要一个独立的程序计数器,各个线程间的计数器互不影响,独立存储. ...