在uniapp里实现点击不同的按钮显示不同的内容(同一页面)

在uni-app中，要实现点击不同按钮显示不同内容在同一页面，可以通过绑定事件和切换组件的显示状态来完成。以下是实现该功能的一种基本方法：

1. 使用`<view>`标签创建不同内容的容器，并设置初始状态为不显示（可以通过设置`v-if`或`v-show`来控制）。
2. 为每个按钮绑定点击事件，在事件处理函数中改变对应内容容器的显示状态。

示例代码如下：

<template>
  <view>
    <!-- 按钮1 -->
    <button @click="showContent('content1')">显示内容1</button>
    <!-- 按钮2 -->
    <button @click="showContent('content2')">显示内容2</button>
    
    <!-- 内容1的容器 -->
    <view v-if="showContent1" class="content">
      内容1
    </view>
    <!-- 内容2的容器 -->
    <view v-if="showContent2" class="content">
      内容2
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showContent1: false,
      showContent2: false
    };
  },
  methods: {
    // 切换内容显示的函数
    showContent(content) {
      // 先隐藏所有内容
      this.showContent1 = false;
      this.showContent2 = false;
      
      // 根据参数显示对应的内容
      if (content === 'content1') {
        this.showContent1 = true;
      } else if (content === 'content2') {
        this.showContent2 = true;
      }
    }
  }
};
</script>

<style>
.content {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
}
</style>

在这个示例中，有两个按钮分别用于显示内容1和内容2。每个按钮绑定了一个点击事件处理函数`showContent`。这个函数首先将所有内容的显示状态设置为`false`，然后根据传入的参数设置对应内容的显示状态为`true`。