用Vue.js实现百度和哔哩哔哩两个链接点击切换

在 Vue.js 中，我们可以使用模板、组件和指令来实现这样的功能。首先，我们需要创建一个基础组件，比如 `LinkSwitcher`，它将包含两个链接，并有一个状态变量来跟踪当前显示的是哪个链接。下面是一个简单的例子：

<template>
  <div class="link-switcher">
    <a v-bind:href="currentLink === 'baidu' ? 'https://www.baidu.com' : 'https://www.bilibili.com'"
       @click="toggleLink('baidu')">百度</a>
    <br/>
    <a v-bind:href="currentLink === 'bilibili' ? 'https://www.bilibili.com' : 'https://www.baidu.com'"
       @click="toggleLink('bilibili')">哔哩哔哩</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentLink: 'baidu', // 初始链接设置为百度
    };
  },
  methods: {
    toggleLink(newLink) {
      this.currentLink = newLink; // 当点击时，更新当前链接
    },
  },
};
</script>

这个组件会在每次点击链接时，通过 `toggleLink` 方法改变 `currentLink` 的值，从而动态地更改链接地址。

在主应用中，你可以像这样使用这个组件：

<template>
  <div id="app">
    <link-switcher></link-switcher>
  </div>
</template>

<script>
import LinkSwitcher from './components/LinkSwitcher.vue';

export default {
  components: {
    LinkSwitcher,
  },
};
</script>