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 相关文章推荐
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
Vue3.0的优化总结
Oct 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 COOKIE设置为浏览器进程
2009/06/21 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python django集成cas验证系统
2014/07/14 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
Django 用户认证组件使用详解
2019/07/23 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
Python双链表原理与实现方法详解
2020/02/22 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
免税水晶:Duty Free Crystal
2019/05/13 全球购物
非常详细的C#面试题集
2016/07/13 面试题
计算机大学生的自我评价
2013/10/15 职场文书
幼儿园园长岗位职责
2013/11/26 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
森林防火宣传标语
2014/06/27 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
停电通知范文
2015/04/16 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书