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

2024-10-10 11:27:38

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

<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根据条件不同显示不同按钮的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

在VUE style中使用data中的变量的方法

最近项目中的公共组件,在复用的时候,针对不同的场景,需要不断变更CSS里样式的值,而且已经有了全局的公共组件样式了如果用vue传统的动态绑定class和style的方式去修改样式(文末会提到),需要额外写很多变量和模块class,那如果我的样式的值,可以从父组件,传到子组件,子组件根据传入值去渲染对应样式的值,其实就是要再style中使用data和props中的变量,这要怎么做呢? 其实很简单,只需要三步,大家来看: 1.HTML结构 <Upload ref="upload"
一文读懂vue动态属性数据绑定（v-bind指令）

v-bind的基本用法一.本节说明前面的章节我们学习了如何向页面html标签进行插值操作,那么如果我们想动态改变html标签的属性,该怎么办呢? 这就是我们这节开始要讲的内容v-bind. 二. 怎么做 ":"为v-bind的简写形式,也可称为语法糖三. 效果四. 深入在上图中将a标签的href属性值设置为toutiao,VUE实例将自动去data里面寻找toutiao属性进行值绑定. 不只是a标签,所有的html标签属性都可以通过v-bind进行值绑定,然后通过改变数据动态
Vue.js样式动态绑定实现小结

在项目中,我们时常会遇到动态的去绑定操作切换不同的CSS样式,结合自身项目中遇到的一些情况,也参考了一些文档,针对vue.js样式的动态绑定切换做出如下小结: 动态切换的核心思想: 利用vue指令v-bind来实现动态绑定,从而设置切换不同的样式- vue的最大特点是数据驱动,利用特殊的语法将DOM"绑定"到底层数据,DOM与数据保持同步,每当数据发生变化,DOM视图就会做出相应的更新和响应,正是基于这种特性,我们得以实现class和style的动态绑定- (一定要充分理解数据驱动的含
vue 实现根据data中的属性值来设置不同的样式

style动态赋值 margin-top的值根据choosePaperFlag的值来设置利用三元表达式补充知识:vue 条件判断绑定内联样式当需要判断条件来绑定内联样式时可以三元运算符判断,然后绑定一个对象 :style="!areaCode || !phoneNumber || !receivedCode || !verification ? '{backgruond:#ccc}' : $store.state.store.config.background" 以上这篇vu
vue根据条件不同显示不同按钮的操作

我就废话不多说了,大家还是直接看代码吧~ <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-but
vue实现条件判断动态绑定样式的方法

在我们做前端页面的时候,为了美观和直观,我们希望通过条件判断来让页面显示不同的样式,如下图所示: 当值为"是"时,显示绿色的标签,当值为"否"时,显示为灰色的标签. 标签的样式分别为: <el-tag type="success">绿色标签</el-tag> <el-tag type="info">灰色标签</el-tag> 关键在于type的样式部分,我们利用vue的样式绑定,
Vue写一个简单的倒计时按钮功能

在项目开发里,我们经常会遇到发送验证码.点击了之后有60秒倒计时的按钮,很常见却也很简单,但是在写这个按钮的时候有个别地方还要注意下,今天写出来,如有问题欢迎指正! 完成的效果如下: 为了更快显示出效果,我把时间设成了5秒.按钮在点击之后会出现倒计时,同时按钮变为不可点击状态,样式也发生变化,鼠标悬浮上的样子也会发生变化. 接下来我们用代码来实现: <button class="button" @click="countDown"> {{content}
vue实现微信浏览器左上角返回按钮拦截功能

[需求] 在微信公众号开发中,有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑,而并不是让页面直接返回上一页,之前在这个细节点上的一直实现得不是很好.但看到京东购物公众号上的效果却实现得非常好,所以自己也开始了这方面的尝试.京东的效果如下图: 从上图京东购物效果上来看,在点击搜索拉起一个搜索界面,然后点击左上角反回,只是将搜索界面收起,而页面没有重新像读取进度条一样去返回,而我页面需要的正是这样的效果,下面就用vue来做一个这个过程的 demo 吧. [前提] 微信左上角的返回按钮其实无
Vue实现点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)

平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏. 简单写个Demo  <button @click.stop="ShowHidden = !ShowHidden">显示或隐藏</button>  <div v-if="ShowHidden" @click.stop="&quo
Vue 根据条件判断van-tab的显示方式

我就废话不多说了,大家还是直接看代码吧~ .vue <van-tabs v-model="activeTab"> <van-tab title="XXX" v-if="isShow"></van-tab> <van-tab title="XXX"></van-tab> </van-tabs> .ts private activeTab = 0; priva
VUE中V-IF条件判断改变元素的样式操作

方法一 v-if判断后用标签改变样式(特定显示列字体加粗) <v-list dense> <template v-for="(col,i) in cols"> <v-list-item :key="i" v-if="col.text=='商品码'||col.text=='通用名称'"> <v-list-item-content><b>{{col.text}}</b></
vue实现鼠标经过显示悬浮框效果

本文实例为大家分享了vue实现鼠标经过显示悬浮框效果的具体代码,供大家参考,具体内容如下项目架构采用vue-cli脚手架搭建的webpack项目实现的效果如下: 鼠标经过button 右边显示出一个悬浮框鼠标移出buttom元素悬浮框隐藏并且悬浮框可以随着鼠标的移动而改变位置全部代码如下: <template> <div class="hello"> <div id="focus_toolTip" class=&
Vue.js实现点击左右按钮图片切换

本文实例为大家分享了Vue.js实现点击左右按钮图片切换的具体代码,供大家参考,具体内容如下关于图片切换,网上也有很多的说法,这边通过参考给出了如下所示的解决方案效果: html 通过v-for循环展示图片列表itemlist,将图片路径保存在data中的itemlist中,添加上下按钮的点击事件. <template> <div> <div class="zs-adv"> <a title="上一页&qu
Vue中子组件的显示与隐藏方式

目录子组件的显示与隐藏第一步使用v-show 1.1 父组件 1.2 子组件 2 第二步父子组件传参 2.1 父组件 2.2 子组件子组件的显示与隐藏在使用Vue开发前端页面的过程中,经常都会遇到需要在父组件中控制子组件的显示/隐藏,比如弹出窗口.最简单的方法就是:通过父子组件间的数据双向绑定来实现.这种方法虽然简单,但只是针对于父与子组件这种关系来实现的.如果是子组件与子组件之间,可以考虑使用Vuex来完成. 另外我自己也是一个前端小白,为了更方便大家理解,我将代码拆分成了两个步骤

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

相关推荐

随机推荐