<van-sidebar v-model="activeKey" fixed="false"> <van-sidebar-item title="新手球拍" /> <van-sidebar-item title="进阶球拍" /> <van-sidebar-item title="高级球拍" /> </van-sidebar>利用onchange监听索引事件，当点击是把对应的索引赋值给对应的右侧的布局，实现页面把不同数据切换代码

你可以在`<van-sidebar>`标签上添加`@change`事件监听器来实现索引切换时更新右侧布局的功能。具体实现如下：

1. 在`data`中定义需要切换的数据，以及当前选中的索引值：

data() {
  return {
    activeKey: 0, // 当前选中的索引值
    racketList: [ // 不同索引对应的数据
      {
        id: 1,
        name: '新手球拍',
        desc: '适合初学者使用的球拍'
      },
      {
        id: 2,
        name: '进阶球拍',
        desc: '适合有一定基础的球员使用的球拍'
      },
      {
        id: 3,
        name: '高级球拍',
        desc: '适合专业球员使用的球拍'
      }
    ],
    currentRacket: {} // 当前选中的球拍数据
  }
}

2. 在模板中，使用`<van-sidebar-item>`标签渲染侧边栏，并绑定`activeKey`作为选中的索引值：

<van-sidebar v-model="activeKey" fixed="false">
  <van-sidebar-item title="新手球拍" />
  <van-sidebar-item title="进阶球拍" />
  <van-sidebar-item title="高级球拍" />
</van-sidebar>

3. 在模板中，使用`<van-card>`标签渲染右侧的布局，并根据当前选中的索引值显示对应的数据：

<van-card>
  <div class="card-content">{{ currentRacket.name }}</div>
  <div class="card-content">{{ currentRacket.desc }}</div>
</van-card>

4. 在`<script>`标签中，定义`onChange`方法来更新选中的索引值，并根据索引值更新右侧的数据：

methods: {
  onChange(index) {
    this.activeKey = index; // 更新选中的索引值
    this.currentRacket = this.racketList[index]; // 更新右侧的数据
  }
}

5. 在`<van-sidebar>`标签上添加`@change`事件监听器，将事件绑定到`onChange`方法上：

<van-sidebar v-model="activeKey" fixed="false" @change="onChange">
  <van-sidebar-item title="新手球拍" />
  <van-sidebar-item title="进阶球拍" />
  <van-sidebar-item title="高级球拍" />
</van-sidebar>

这样，当用户点击侧边栏的不同项时，就会触发`@change`事件，从而更新选中的索引值和右侧的数据。