前言


  之前写过滤器的时候都是 用 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. 【Python3爬虫】常见反爬虫措施及解决办法(二)

    这一篇博客,还是接着说那些常见的反爬虫措施以及我们的解决办法.同样的,如果对你有帮助的话,麻烦点一下推荐啦. 一.防盗链 这次我遇到的防盗链,除了前面说的Referer防盗链,还有Cookie防盗链和 ...

  2. arcgis画矢量图

    总图 首先建立目标文件夹和目标文件(shp文件) 现在H:\ex_gis\下新建test文件夹,起名为test,再此目录下建立一个线要素文件. 在这里选择要素类型.这里以线为例,点面类推即可. 设置坐 ...

  3. windows之如何把文件夹转换成iso文件

    (1)oscdimg下载路径: 链接:https://pan.baidu.com/s/1U_SfamsOvI2nav9odAzujQ提取码:21fr (2)以管理员身份运行cmd命令: Oscdimg ...

  4. 初识Djiango

    老师的博客:点我 内容主要是看老师的博客 下面是自己的写的某些自己当时不太懂的. 关于Django的版本的问题 Django官网下载页面 在官网上显示lts的是表示支持长期版本.所以最好下载1.11版 ...

  5. Android开发:Eclipse+OpenCV环境搭建

    一.OpenCV预备: OpenCV是一个跨平台计算机视觉库,可以运行在Linux.Windows.Android和Mac OS操作系统上.它由一系列 C 函数和少量 C++ 类构成,同时提供了Pyt ...

  6. 03 JVM 从入门到实战 | 简述垃圾回收算法

    引言 之前我们学习了 JVM 基本介绍 以及 什么样的对象需要被 GC ,今天就来学习一下 JVM 在判断出一个对象需要被 GC 会采用何种方式进行 GC.在学习 JVM 如何进行垃圾回收方法时,发现 ...

  7. [ZJOI2007] 捉迷藏

    idea1 可能会死掉的想法:考虑点分治维护每个分治中心x到达分治块内的个点距离,具体是用堆维护分治快内的x的儿子y到y的子树内的所有点距离(记为C[y]),取所有C[y]的top+e(x,y)放入x ...

  8. property相关补充

    # Author : Kelvin # Date : 2019/1/25 15:20 class Foo: def __init__(self): self.original_price = 100 ...

  9. docker 搭建私有仓库 harbor

    前提 已安装好 docker 和  docker-compose 环境:CentOS Linux release 7.5 docker 版本:18.09.05 1.安装harbor wget -P / ...

  10. BeetleX之HttpClusterApi应用详解

    之前的文章已经介绍过如何使用HttpClusterApi进行去中心化的HTTP集群服务访问,这一章主要详细讲述如何使用HttpClusterApi,主要包括如何定义节点,创建服务接口和使用接口描述不同 ...