vue3中点击一个按钮，显示不同内容

可以通过条件渲染来实现，根据按钮的点击事件改变数据的值，然后使用v-if或v-show指令来控制不同内容的显示和隐藏。代码示例如下：

<template>
  <div>
    <button @click="showContent = !showContent">切换内容</button>
    <div v-if="showContent">内容1</div>
    <div v-else>内容2</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showContent: true
    };
  }
};
</script>

在上面的代码中，我们创建了一个按钮，然后使用v-if和v-else指令来控制两段不同的内容的显示。按钮点击事件会触发showContent数据的值的改变，从而实现不同内容的切换。

相关问题

vue3点击按钮显示不同组件 动态组件

以下是实现vue3点击按钮动态挂载子组件的方法：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import Component1 from './Component1.vue'
import Component2 from './Component2.vue'

export default {
  components: {
    Component1,
    Component2
  },
  data() {
    return {
      currentComponent: 'Component1'
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'Component1' ? 'Component2' : 'Component1'
    }
  }
}
</script>

在上面的代码中，我们首先在模板中添加了一个按钮，然后使用`<component>`标签来动态挂载子组件。在`<component>`标签中，我们使用`:is`属性来指定当前要挂载的组件。在`data`中，我们定义了一个`currentComponent`变量，用于存储当前要挂载的组件。在`toggleComponent`方法中，我们通过判断`currentComponent`的值来切换要挂载的组件。

另外，如果你想要实现点击按钮显示不同的组件，可以将`toggleComponent`方法中的判断逻辑改为根据按钮点击次数来切换组件。

vue点击按钮显示内容

你可以通过在Vue模板中添加一个按钮，然后在按钮上绑定一个点击事件，在事件处理函数中更新Vue实例的数据，从而显示内容。

下面是一个简单的示例代码：

<template>
  <div>
    <button @click="showContent">显示内容</button>
    <p v-show="contentVisible">{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '这是要显示的内容',
      contentVisible: false
    }
  },
  methods: {
    showContent() {
      this.contentVisible = true
    }
  }
}
</script>

在上面的代码中，我们首先在模板中添加了一个按钮，并给它绑定了一个`showContent`方法。在这个方法中，我们将`contentVisible`变量设置为`true`，从而显示内容。同时，我们使用Vue的`v-show`指令来控制内容的显示和隐藏。当`contentVisible`为`true`时，内容会被显示出来，否则会被隐藏起来。

希望这个示例能够帮助你实现点击按钮显示内容的功能。