【土旦】在vue filters中 优雅的使用对象的key、value来替换 if switch多重判断简化流程
前言
之前写过滤器的时候都是 用 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多重判断简化流程的更多相关文章
- 【土旦】vue项目中 使用 pako.js 解密 gzip加密字符串
前言 今天跟后台对接一个接口,接受到一个加密的值,说是通过gzip加密过的,然后就蒙蔽了, 赶紧上百度找了一下资料,通过一篇文章(原文在底部)发现有个js库可以解密,就下载轻松解密了 实现代码 pok ...
- vue filters中使用data中数据
vue filters中 this指向的不是vue实例,但想要获取vue实例中data中的数据,可以采用下面方法.在 beforeCreate中将vue实例赋值给全局变量app0,然后filters中 ...
- 如何在Vue项目中优雅的使用sass
开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架一键安装~) 1.打开项目终端,安装sass的依赖包 npm install --save-dev sass-loader / ...
- 【土旦】Vue+WebSocket 实现长连接
1.websocket 连接代码 created() { this.initWebsocket() }, methods: { // 初始化websocket initWebsocket() { le ...
- 如何在Vue项目中优雅的使用swiper插件
个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! 开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架 ...
- 【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件
问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图 解决方法: html: <input type=&quo ...
- [转]Vue生态系统中的库
Vue UI组件库 Vuex vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github ...
- 如何在Vue中优雅的使用防抖节流
1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
随机推荐
- [Swift]LeetCode1033. 移动石子直到连续 | Moving Stones Until Consecutive
Three stones are on a number line at positions a, b, and c. Each turn, let's say the stones are curr ...
- ASP.NET Core2.2+Quartz.Net 实现web定时任务
作为一枚后端程序狗,项目实践常遇到定时任务的工作,最容易想到的的思路就是利用Windows计划任务/wndows service程序/Crontab程序等主机方法在主机上部署定时任务程序/脚本. 但是 ...
- 非常贴心的轮子 FreeSql
FreeSql 项目从2018年11月28日开发至今,版本已发布至 v0.3.12,版本规则:年数-月-日-当日版本号.目前主要包括 FreeSql.FreeSql.Repository 两个项目的维 ...
- Python 中的设计模式详解之:策略模式
虽然设计模式与语言无关,但这并不意味着每一个模式都能在每一门语言中使用.<设计模式:可复用面向对象软件的基础>一书中有 23 个模式,其中有 16 个在动态语言中“不见了,或者简化了”. ...
- VS2017、VS2019没有Setup安装项目(Visual Studio Installer)_解决方案
前言: VS2010中有一个自带的安装部署项目,叫:Visual Studio Installer ,我们通常称为:setup项目,是一个用于自定义安装部署的项目方案.但是在VS2017,VS2019 ...
- 笔记:Java虚拟机运行时数据区
Java虚拟机在执行Java程序的过程中会把它管的内存划分为以下若干个不同的区域: 1.程序计数器 程序计数器是一块较小的内存空间,它可以看作是当前线程所执行的字节码的行号指示器:由于Java虚拟机的 ...
- JavaScript 原型的深入指南
摘要: 理解prototype. 原文:JavaScript 原型的深入指南 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 不学会怎么处理对象,你在 JavaScript 道路就就走 ...
- Deepin linux Compass.app安装
compass.app是集成了sass的工具,安装完Compass就能够使用sass. 首先,上官网 可以看到官网上推荐的两种sass使用方式,application&command line ...
- 前端vue系列-起始篇 vue的基本认知
hi,大家伙,我是佛系大大,很高兴与你们一起沟通,学习,进步. 很久不更新博客了,现在回来再写博客,尽然是有些怀念的感觉,幸福的感觉.因为写博客,内心会很宁静,沉浸在自己的世界中,是很幸福的一件事.当 ...
- 涨姿势:抛弃字母、数字和下划线写SHELL
PHP中异或 (^) 的概念 <?php echo"A"^"?";?> <?php echo"A"^"?&quo ...