前端根据卡类型显示不同的按钮，然后怎么写跳转呢？

Question

储蓄卡：去转账，买理财、查明细；
电子账户：转入、转出、查明细；
信用卡：查账单、去还款；
存折：查明细；
他行卡：他行卡转入、查明细
在前端不同卡的类型展示不同的按钮，怎么写一个方法在页面展示，怎么写跳转

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

问题概括

这个问题的目的是要在前端根据用户持有的卡类型动态显示不同的操作按钮，并实现点击按钮后进行相应的页面跳转。

问题出现原因

出现这个问题的原因是因为不同的卡类型具有不同的操作权限和功能，前端需要根据这些差异来展示不同的按钮，并且要处理按钮点击后的跳转逻辑。

问题解决方案

针对这个问题，我们可以使用Vue.js框架来实现动态显示按钮和跳转逻辑。以下是解决方案的步骤：

1. 定义卡类型数据：在Vue组件中定义一个数据属性来存储当前卡的类型。
2. 计算属性：使用计算属性来根据卡类型动态生成按钮列表。
3. 方法：定义一个方法来处理按钮点击事件，并根据按钮类型执行跳转逻辑。

提供代码

以下是使用Vue.js实现上述功能的示例代码：

<template>
  <div>
    <button v-for="(button, index) in buttons" :key="index" @click="goToPage(button.link)">
      {{ button.text }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cardType: '储蓄卡', // 假设当前卡类型为储蓄卡，实际应用中可能通过props或API获取
    };
  },
  computed: {
    buttons() {
      let buttons = [];
      switch (this.cardType) {
        case '储蓄卡':
          buttons = [{ text: '去转账', link: '/transfer' }, { text: '买理财', link: '/wealth' }, { text: '查明细', link: '/details' }];
          break;
        case '电子账户':
          buttons = [{ text: '转入', link: '/deposit' }, { text: '转出', link: '/withdraw' }, { text: '查明细', link: '/details' }];
          break;
        // ...其他卡类型
        default:
          break;
      }
      return buttons;
    },
  },
  methods: {
    goToPage(link) {
      // 根据实际应用的路由系统进行跳转，这里以HTML5 History API为例
      window.history.pushState({}, '', link);
    },
  },
};
</script>

示例代码运行方式

要运行这段代码，你需要一个支持Vue.js的开发环境。你可以使用Vue CLI创建一个新项目，并将上述代码放入项目的组件文件中。然后，运行项目并查看效果。

示例代码预期运行结果

当你运行这段代码并访问对应的Vue组件页面时，你将看到根据当前卡类型动态显示的按钮。点击不同的按钮，页面将通过HTML5 History API进行跳转，导航到预设的链接地址。

请注意，实际应用中可能需要根据具体的路由系统（如Vue Router）来调整goToPage方法的实现。此外，按钮的样式和布局可能需要根据设计要求进行调整。