快捷導(dǎo)航

vue根據(jù)條件不同顯示不同按鈕的操作

更新時(shí)間：2020年08月04日 09:13:33 作者：weixin_44261007

這篇文章主要介紹了vue根據(jù)條件不同顯示不同按鈕的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

我就廢話不多說(shuō)了，大家還是直接看代碼吧~

<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>

補(bǔ)充知識(shí)：vue 過(guò)濾器之根據(jù)不同的類(lèi)型渲染不同的字段

本文旨在分享如何利用vue過(guò)濾器，實(shí)現(xiàn)簡(jiǎn)單、高效的對(duì)同一個(gè)字段不同的字段值，渲染出不同的內(nèi)容。

實(shí)際場(chǎng)景中我們可能會(huì)遇到后端在傳給我們的數(shù)據(jù)中，某一個(gè)字段為type，type的值有1、2、3、4、5、6等，

1-6分別對(duì)應(yīng)的是，蘋(píng)果、梨、葡萄、芒果、香蕉、百香果。如何通過(guò)寫(xiě)最少的代碼就能實(shí)現(xiàn)將他們一一對(duì)應(yīng)起來(lái)呢？下面將一一介紹：

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

首先最初級(jí)的做法就是：在拿到數(shù)據(jù)后我們可能會(huì)用if/else來(lái)判斷，如下所示：

 filters: {
 filterType: function(val) {
 // 1、蘋(píng)果 2、梨 3、葡萄 4、芒果 5、香蕉 6、百香果
 if (val ==== 1) {
 return '蘋(píng)果'
 } 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 '未知類(lèi)型'
 }
 }
 }

這種寫(xiě)法是可以實(shí)現(xiàn)需求的，但是隨著type的值逐漸增多，else if 的代碼塊會(huì)越來(lái)越臃腫，這種寫(xiě)法帶來(lái)的后果就是可讀性越來(lái)越差，且寫(xiě)法也不優(yōu)雅，如何優(yōu)化這點(diǎn)呢？我們可以使用switch：

filters: {
 filterType: function(val) {
 // 1、蘋(píng)果 2、梨 3、葡萄 4、芒果 5、香蕉 6、百香果
 switch (val) {
 case 1:
  return '蘋(píng)果'
  break;
 case 2:
  return '梨'
  break;
 case 3:
  return '葡萄'
  break;
 case 4:
  return '芒果'
  break;
 case 5:
  return '香蕉'
  break;
 case 6:
  return '百香果'
  break;
 default:
  return '未知類(lèi)型'
 }
 }
 }

這樣寫(xiě)比if/else 的寫(xiě)法可讀性提高了不少，但是代碼量還是挺多的，一個(gè)小功能用了這么多代碼，實(shí)在是不能忍受，那怎么減少代碼量呢？請(qǐng)往下看。。

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

我們可以把存在的類(lèi)型值放在數(shù)組里面，通過(guò)傳入的type作為數(shù)組的下表，即可取到對(duì)應(yīng)的值。這里要特別要提示一下，若type的值是從1開(kāi)始，那傳入的val就要減一，數(shù)組的下標(biāo)是從0開(kāi)始。

可以看到，這樣寫(xiě)我們的確是少寫(xiě)了很多代碼，但是有個(gè)問(wèn)題，上面的方法只適用于1-n這種有順序的正整數(shù)類(lèi)型，假如type為-1，1，2，3，23 這種無(wú)序的情況就不適用了，怎么解決呢？且看下面

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

上面這個(gè)寫(xiě)法將type值作為對(duì)象的鍵值，通過(guò)filtes和Object.keys拿到數(shù)組中所有的鍵值，判斷傳入的val 是否和遍歷的key值相等，來(lái)取到對(duì)應(yīng)的value值

最后兩種方法具體使用看具體場(chǎng)景，若是連續(xù)的正整數(shù)，可以直接使用第二種方法，若是需要擴(kuò)展性強(qiáng)的，直接使用最后一種。

如有更好的寫(xiě)法，歡迎交流??！

以上這篇vue根據(jù)條件不同顯示不同按鈕的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: