用Vue.js实现点击切换两个内容

在Vue.js中，你可以通过事件绑定和条件渲染轻松地实现点击切换两个内容。首先，你需要创建一个Vue组件，例如`ContentSwitcher.vue`，并设置两个状态变量来代表当前显示的内容：

<template>
  <div @click="switchContent">
    <p v-if="currentContent === 'content1'">内容1</p>
    <p v-else if="currentContent === 'content2'">内容2</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentContent: 'content1'
    };
  },
  methods: {
    switchContent() {
      this.currentContent = this.currentContent === 'content1' ? 'content2' : 'content1';
    }
  }
};
</script>

在这个例子中，当用户点击`div`元素时，会触发`switchContent`方法。这个方法会检查`currentContent`的值，如果为`content1`则改为`content2`，反之亦然。

要在实际应用中使用这个组件，只需要在其他地方引用它，并传入数据到子组件：

<template>
  <div id="app">
    <ContentSwitcher />
  </div>
</template>

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

new Vue({
  components: { ContentSwitcher },
});
</script>

现在每次点击`div`，内容就会切换显示。