vue点击便利按钮跳转外部不同链接

如果你需要在Vue中点击不同的按钮来跳转到不同的外部链接，你可以使用`<a>`标签的`v-bind`指令绑定不同的链接地址，或者使用一个数组来存储不同的链接地址，然后通过按钮的索引来获取对应的链接地址。以下是两种不同的方法：

1. 使用`<a>`标签和`v-bind`

<template>
  <div>
    <a v-bind:href="links[0]" target="_blank">链接1</a>
    <a v-bind:href="links[1]" target="_blank">链接2</a>
    <a v-bind:href="links[2]" target="_blank">链接3</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      links: [
        'https://www.example.com/link1',
        'https://www.example.com/link2',
        'https://www.example.com/link3'
      ]
    }
  }
}
</script>

在上面的代码中，我们使用了`v-bind`指令将每个`<a>`标签的`href`属性绑定到了不同的链接地址。

2. 使用数组和按钮索引

<template>
  <div>
    <button v-for="(link, index) in links" :key="index" @click="gotoExternalLink(index)">
      {{ `链接${index + 1}` }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      links: [
        'https://www.example.com/link1',
        'https://www.example.com/link2',
        'https://www.example.com/link3'
      ]
    }
  },
  methods: {
    gotoExternalLink(index) {
      window.location.href = this.links[index];
    }
  }
}
</script>

在上面的代码中，我们使用了`v-for`指令遍历了数组`links`，然后使用了`v-bind`指令动态绑定了每个按钮的文本内容。当我们点击按钮时，`gotoExternalLink`方法会被触发，通过传入的`index`参数来获取对应的链接地址，从而跳转到对应的外部链接。