vue根据条件不同显示不同按钮的操作


Posted in Javascript onAugust 04, 2020

我就废话不多说了,大家还是直接看代码吧~

<template slot-scope="scope">
 <el-button v-if="scope.row.isDeleted === 0" @click="lowerShelf(scope.row.id)" size="mini" type="primary" plain>下架</el-button>
 <el-button v-else size="mini" type="primary" plain>已下架</el-button>
</template>

补充知识:vue 过滤器之根据不同的类型渲染不同的字段

本文旨在分享如何利用vue过滤器,实现简单、高效的对同一个字段不同的字段值,渲染出不同的内容。

实际场景中我们可能会遇到后端在传给我们的数据中,某一个字段为type,type的值有1、2、3、4、5、6等,

1-6分别对应的是,苹果、梨、葡萄、芒果、香蕉、百香果。如何通过写最少的代码就能实现将他们一一对应起来呢?下面将一一介绍:

<ul>
 <li v-for="(d,index) in value" :key="index">
 {{d.type| filterType}}
 </li>
 </ul>

首先最初级的做法就是:在拿到数据后我们可能会用if/else来判断,如下所示:

filters: {
 filterType: function(val) {
 // 1、苹果 2、梨 3、葡萄 4、芒果 5、香蕉 6、百香果
 if (val ==== 1) {
 return '苹果'
 } else if (val ==== 2) {
 return '梨'
 } else if (val ==== 3) {
 return '葡萄'
 } else if (val === 4) {
 return '芒果'
 } else if (val === 5) {
 return '香蕉'
 } else if (val === 6) {
 return '百香果'
 } else {
 return '未知类型'
 }
 }
 }

这种写法是可以实现需求的,但是随着type的值逐渐增多,else if 的代码块会越来越臃肿,这种写法带来的后果就是可读性越来越差,且写法也不优雅,如何优化这点呢?我们可以使用switch:

filters: {
 filterType: function(val) {
 // 1、苹果 2、梨 3、葡萄 4、芒果 5、香蕉 6、百香果
 switch (val) {
 case 1:
  return '苹果'
  break;
 case 2:
  return '梨'
  break;
 case 3:
  return '葡萄'
  break;
 case 4:
  return '芒果'
  break;
 case 5:
  return '香蕉'
  break;
 case 6:
  return '百香果'
  break;
 default:
  return '未知类型'
 }
 }
 }

这样写比if/else 的写法可读性提高了不少,但是代码量还是挺多的,一个小功能用了这么多代码,实在是不能忍受,那怎么减少代码量呢?请往下看。。

filters: {
 filterType: function(val) {
 // 1、苹果 2、梨 3、葡萄 4、芒果 5、香蕉 6、百香果
 var typeArr = ['苹果', '梨' , '葡萄', '芒果', '香蕉', '百香果'];
 return typeArr[val-1];
 }
}

我们可以把存在的类型值放在数组里面,通过传入的type作为数组的下表,即可取到对应的值。这里要特别要提示一下,若type的值是从1开始,那传入的val就要减一,数组的下标是从0开始。

可以看到,这样写我们的确是少写了很多代码,但是有个问题,上面的方法只适用于1-n这种有顺序的正整数类型,假如type为-1,1,2,3,23 这种无序的情况就不适用了,怎么解决呢?且看下面

filters: {
 filterType: function(val) {
 // -1、苹果 2、梨 6、葡萄 8、芒果 13、香蕉 156、百香果
 let typeArr = [{"-1": "苹果"},{"2": "梨"},{"6": "葡萄"},{"8": "芒果"},{"13": "香蕉"},{"156": "百香果"}];
 let result = originTypeArr.filter((item) => Object.keys(item)[0] == row.type);
 return result.length > 0 ? result[0][row.type] : '未知类型';
 }
}

上面这个写法将type值作为对象的键值,通过filtes和Object.keys拿到数组中所有的键值,判断传入的val 是否和遍历的key值相等,来取到对应的value值

最后两种方法具体使用看具体场景,若是连续的正整数,可以直接使用第二种方法,若是需要扩展性强的,直接使用最后一种。

如有更好的写法,欢迎交流!!

以上这篇vue根据条件不同显示不同按钮的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
如何在Vue.JS中使用图标组件
Aug 04 #Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 #Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 #Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 #Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 #Javascript
VUE使用axios调用后台API接口的方法
Aug 03 #Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 #Javascript
You might like
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
python格式化字符串实例总结
2014/09/28 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
深入理解Python变量与常量
2016/06/02 Python
Python计算字符宽度的方法
2016/06/14 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python tkinter label 更新方法
2018/10/11 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
python 实现多维数组(array)排序
2020/02/28 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
华润集团网上药店:健一网
2016/09/19 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
大学生入党推荐书范文
2014/05/17 职场文书
李培根演讲稿
2014/05/22 职场文书
行政司机岗位职责
2015/04/10 职场文书
无保留意见审计报告
2015/06/05 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
Java基础-封装和继承
2021/07/02 Java/Android