vue点击按钮跳转外部链接

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