前言


  之前写过滤器的时候都是 用 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. .net core redis 驱动推荐,为什么不使用 StackExchange.Redis

    前言 本人从事 .netcore 转型已两年有余,对 .net core 颇有好感,这一切得益于优秀的语法.框架设计. 2006年开始使用 .net 2.0,从 asp.net 到 winform 到 ...

  2. Asp.Net Core 轻松学-10分钟使用EFCore连接MSSQL数据库

    前言     在 .Net Core 2.2中 Microsoft.AspNetCore.App 默认内置了EntityFramework Core 包,所以在使用过程中,我们无需再从 NuGet 仓 ...

  3. DateUtil日期工具类

    目录 (1)需要导入的包 (2)DateUtil类 (1)需要导入的包 主要用于Strings.isNullOrEmpty(date) <!--string处理类--> <depen ...

  4. SQL Server内幕之数据页

    数据页是包含已添加到数据库表中的用户数据的结构. 如前所述, 数据页有三种, 每个都以不同的格式存储数据. SQL server 有行内数据页.行溢出数据页和 LOB 数据页. 与 SQL serve ...

  5. fab 菜单实现—圆形、半圆、扇形、直线、射线

    前段时间记录一下fab 菜单实现之前传-钟表表盘,今天终于弄正文了. 本文基于上篇文章的布局方式和位置计算,并参考35 Cool Floating Action Button Animations(h ...

  6. 选中FeatureLayer元素并高亮显示

    点击FeatureLayer要素会弹出popup弹出框以显示要素的相关内容.这个例子实现点击要素,选中并高亮显示.例子使用ArcGIS API for JavaScript 4.8. 一.代码框架 & ...

  7. Android注解框架实战-ButterKnife

    文章大纲 Android注解框架介绍 ButterKnife实战 项目源码下载   一.框架介绍 为什么要用注解框架?  在Android开发过程中,我们经常性地需要操作组件,操作方法有findVie ...

  8. Android组件化开发的简单应用

    组件化开发的主要步骤: 一.新建Modules 1.新建Project,作为应用的主Module. 2.新建Module:"Common",类型选择"Android Li ...

  9. Git报错 bad numeric config value '100000' for 'pack.windowmemory': out of range

    Git报错 bad numeric config value '10240M' for 'pack.windowmemory': out of range $ git config --edit -- ...

  10. markdown 基本操作

    无序列表:输入-之后输入空格有序列表:输入数字+“.”之后输入空格任务列表:-[空格]空格 文字标题:ctrl+数字表格:ctrl+t生成目录:[TOC]按回车选中一整行:ctrl+l选中单词:ctr ...