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

前言



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

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

1 if (val == 1) {
2         return "支付成功";
3       } else if (val == 2) {
4         return "支付失败";
5       } else if (val == 3) {
6         return "已发货";
7       } else {
8         return "出现错误";
9 }
 1 switch (day)
 2 {
 3 case 0:
 4   x="Today it‘s Sunday";
 5   break;
 6 case 1:
 7   x="Today it‘s Monday";
 8   break;
 9 case 2:
10   x="Today it‘s Tuesday";
11   break;
12 case 3:
13   x="Today it‘s Wednesday";
14   break;
15
16 }

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

  于是就有了这样的代码

  



  

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

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

  前端交流群:87709616

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

原文地址:https://www.cnblogs.com/tudan/p/10243456.html

时间: 2024-12-16 07:12:52

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

新手如何在Vue项目中优雅的使用UEditor(百度富文本编辑器)

1.去官网,下载ueditor,解压,重命名,放在vue项目中的static文件夹下. ps:新手会觉得在官网上有几种不同版本的文件,俺到底要下载哪一个,如果你仅仅是一个前端,那么好,只要是最新版本的UEditor,随便下,如果你比较负责,问问你后端同事用什么语言写后端的,那就用什么版本的,其实不同语言的功能都一样,只是为了方便给后面图片上传的配置提供方便. 官网链接:http://ueditor.baidu.com/website/download.html UEditor目录如下所示: 2.

基于VUE+TS中引用ECharts的中国地图和世界地图密度表

首先先附上官网 http://echarts.baidu.com/option.html#series-line.label 以及密度表对应geo配置文档 http://echarts.baidu.com/option.html#geo 以下仅是个人在开发中逐步摸索出来的.demo目前没出问题.如果有错误地方请留言指出  (若转载请标注出处) 直接上效果图,对应代码在效果图下面 安装: 1. npm install echarts --save2. npm install --save @typ

Vue实例 中的常用配置项

创建Vue实例时,使用 new Vue ({//配置项}) 或者 组件定义中 export default {//配置项},所有的Vue组件都是Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外) 如: new Vue({//选项配置 el: '#app', components: { App }, template: '<App/>' }) 配置项一共可以分为六大类:数据.DOM.生命周期钩子.资源.组合.其他 一.数据 (1)data:Vue根实例或者当前组件上的数据对象,类型可

vue项目中开发规范记录

代码规范 文件命名 统一使用下划线分割例如 ** goods_library.vue ** 代码格式约束 vscode 安装 EditorConfig 插件 vscode 安装 eslint插件,并且在设置中添加配置项 编辑器出现eslint error 必须解决 vscode 配置添加 "eslint.validate": [ "javascript", "javascriptreact", "vue" ] css 规范 统

实例分析Vue.js中 computed和method不同机制

在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. 而使用 methods ,在重新渲染的时候,函数总会重新调用执行 为了方便理解,先上一段源码 <!DOCTYPE html> <html> <head> <m

Vue 实例中的生命周期钩子

Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,它可以包含数据(data).模板(template).挂载元素(el).方法(methods).生命周期钩子(lifecyclehook)等选项. Vue 实例化的选项 需要注意的

[译]怎样在Vue.js中使用jquery插件

原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使你头疼,当你试图使它与jquery插件混用的时候. 问题的原因是jquery与Vue是完全不同的东西,Vue是通过组件与数据绑定来进行渲染的,jquery则主要是用来做简单的单击处理和强大的操纵DOM的能力. 我试图寻找一些东西来帮助自己解决这个问题,但是我发现一些组件所做的工作不是很让我满意,所以

如何在vi中优雅地使用ex

记得刚开始用vi的时候,只会用:wq或者:q来退出,后来又学会了ZZ,今天上班路上没事做,又把 Learning the Vi & Vim 的 Introducing the ex Editor 过了一遍,又发现了一个退出命令-:x,其实很早以前这些内容都看过,但是由于使用惯性,渐渐地会把一些平时不太用到的命令给遗忘了,其实一个防止遗忘的好办法就是认真总结一下,方便以后查阅. 其实当我们在命令模式下按下冒号后,就已经进入ex编辑模式了,也就是说退出时使用的命令wq q x其实都是ex的命令.vi

关于vue数组中对象属性变更页面没重新渲染的问题

前段时间做开发的时候用mqtt监听了服务端信息,推送过来的数据要变更数组里面的对象的数据,修改好后但是页面并没有更新,因为javascript机制,vue并不能检测到数组变化,也是查阅知道了$set()函数, 具体用法: arr.$set(index, { name : value }), index: 索引,name: 数组中对象的属性名, value: 要赋给属性的值 this.footerList.$set(i, { siteId : monitorSiteData[j].siteId,