UniApp 左侧导航栏实现：点击按钮切换内容

<template>
  <view class='container'>
    <view class='sidebar'>
      <ul>
        <li @click='selectPage('page1')'>按钮1</li>
        <li @click='selectPage('page2')'>按钮2</li>
        <li @click='selectPage('page3')'>按钮3</li>
      </ul>
    </view>
    <view class='content'>
      <view v-if='selectedPage === 'page1''>内容1</view>
      <view v-else-if='selectedPage === 'page2''>内容2</view>
      <view v-else-if='selectedPage === 'page3''>内容3</view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      selectedPage: 'page1' // 默认选中的页面
    };
  },
  methods: {
    selectPage(page) {
      this.selectedPage = page;
    }
  }
};
</script>
<style>
.container {
  display: flex;
  height: 100vh;
}

.sidebar {
  flex: 0 0 200px;
  background-color: #f5f5f5;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  padding: 10px;
  cursor: pointer;
}

.content {
  flex: 1;
  background-color: #fff;
}
</style>
<p>在上述示例中，左侧导航栏使用 <code>&lt;ul&gt;</code> 和 <code>&lt;li&gt;</code> 标签组成，通过绑定 <code>@click</code> 事件来监听按钮的点击。右侧的内容根据 <code>selectedPage</code> 的值进行条件渲染，使用 <code>v-if</code> 和 <code>v-else-if</code> 指令来根据不同的条件显示对应的内容。</p>
<p>在 <code>data</code> 中定义了 <code>selectedPage</code> 变量，默认选中的页面为 <code>'page1'</code>。当点击不同的按钮时，调用 <code>selectPage</code> 方法来修改 <code>selectedPage</code> 的值，从而实现切换页面内容的功能。</p>
<p>你可以根据自己的需求修改代码和样式，以适应你的项目。</p>
<p>希望这个示例对你有所帮助！</p>