Vue中页面判断逻辑比较复杂的情况，如何正确使用判断

最近项目做到订单模块（大家都知道订单会有好多种状态），每一种状态页面展示的模块也不同，这个时候就需要用到多种条件判断，那么如何使用优雅的方式实现需求呢，避免使用过多的判断、代码可维护降低。详细步骤如下：

整理页面共有哪些模块，分别给各个模块定义好的自己的标识（名字），然后通过一个函数来判断是否显示
写好每个状态应该有哪些模块
页面初始化数据，告诉我，你是什么状态
当前状态有没有在我这些模块里，有就显示，没有就隐藏

view:
// 第一步
<el-button type="primary" v-if="hasModule('btnPay')">去支付</el-button>
<el-button type="primary" v-if="hasModule('btnReview')">审核订单</el-button>
<el-button type="primary" v-if="hasModule('btnEdit')">修改商品</el-button>
<el-button type="primary" v-if="hasModule('btnSend')">发货</el-button>
<el-button type="primary" v-if="hasModule('btnService')">送达确认</el-button>
<el-button type="primary" v-if="hasModule('btnReceipt')">收款确认</el-button>
<el-button type="primary" v-if="hasModule('btnCancel')">取消订单</el-button>
<el-button type="primary" v-if="hasModule('btnRemark')">备注订单</el-button>JavaScript：hasModule (moduleName) {// 第二步let moduleMap = {WAIT_PAY: ['btnPay'], // 待支付WAIT_REVIEW: ['btnReview', 'btnEdit', 'btnRemark'], // 待审核WAIT_SHIP: ['btnSend', 'btnCancel', 'btnRemark'], // 待发货WAIT_RECEIVE: ['btnService'], // 待收货WAIT_CLEAR: ['btnReceipt'], // 待清算COMPLETED: ['btnRemark'] // 已完成};// 第三步，根据当前订单状态找对应拥有的模块let currentStatus = moduleMap[this.orderStatus];  // orderStatus 页面加载保存当前订单状态// 第四步if (currentStatus && currentStatus.indexOf(moduleName) > -1) {// if (currentStatus && currentStatus.includes(moduleName)){// includes es6 新出的方法，适用于检索数组，字符串return true;} else {return false;}
}

如果有可以优化或者改进的地方，欢迎各位大佬指正、留言~

Vue中页面判断逻辑比较复杂的情况，如何正确使用判断相关推荐

vue导致页面白屏几种情况
1.vue项目打包后,在非首次线上替换dist文件时,某些手机/浏览器在之后首次打开页面,可能出现白屏情况. 原因:在使用vue-cli脚手架构建完项目,项目完成后,需打包上线.默认打包方式则是 np ...
vue项目中页面生成pdf并下载，vue 中页面转PDF
方法一第一步.安装插件 // 第一个.将页面html转换成图片 npm install --save html2canvas // 第二个.将图片生成pdf npm install jspdf -- ...
vue 父页面中的方法调用_解决Vue中页面成功渲染数据undefined的问题
前言这个标题不太好取. 本文需要下面的知识: https://zhuanlan.zhihu.com/p/260811233zhuanlan.zhihu.com 问题描述我最近的一个功能需求是通过 ...
vue数据改变渲染问题_解决Vue中页面成功渲染数据undefined的问题
前言这个标题不太好取. 本文需要下面的知识:https://zhuanlan.zhihu.com/p/260811233zhuanlan.zhihu.com 问题描述我最近的一个功能需求是通过a ...
vue中页面缓存后destroyed失效，如何关闭定时器
场景页面中设置了定时器,如果组件销毁是没有关闭定时器,他还会一直执行,会非常耗性能,所以需要及时关闭定时器. 关闭定时器 vue项目中,正常情况下,我们在生命周期 destroyed 中关闭即可,一 ...
vue中页面跳转传值_vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样需要操作的是路由history,需要用到 V ...
vue中页面数据改变组件不重新渲染
页面中引用组件 additional-entrust.vue,当界面传的entrustGold值改变时,组件状态不重新渲染代码如下: <div class = "test&qu ...
VUE中页面跳转的常用方式及返回上一页实现的两种方式
一.我们知道,如果是一个页面的某些部分切换变化,那不是网页之间的切换,而是子组件的切换:对于页面切换,我们需要知道的是整个页面的内容和路径都发生了改变.在原生JS中我们知道页面切换可以使用locati ...
vue中页面跳转传值_vue跳转方式（打开新页面）及传参操作示例
本文实例讲述了vue跳转方式(打开新页面)及传参操作.分享给大家供大家参考,具体如下: 1. router-link跳转 // 直接写上跳转的地址 link跳转 // 添加参数 // 参数获取 id ...

Vue中页面判断逻辑比较复杂的情况，如何正确使用判断

Vue中页面判断逻辑比较复杂的情况，如何正确使用判断相关推荐

最新文章

热门文章