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-button v-else size="mini" type="primary" plain>已下架</el-button>
</template>

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

 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 '未知类型'
 }
 }
 }

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 '未知类型'
 }
 }
 }

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

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] : '未知类型';
 }
}