<van-sidebar v-model="activeKey" fixed="false"> <van-sidebar-item title="新手球拍" /> <van-sidebar-item title="进阶球拍" /> <van-sidebar-item title="高级球拍" /> </van-sidebar>利用onchange监听索引事件,当点击是把对应的索引赋值给对应的数据,实现页面把不同数据切换代码
时间: 2024-03-24 18:39:23 浏览: 14
可以使用 `@change` 监听侧边栏项的选中事件,并在方法中根据选中项的索引值修改对应的数据。代码示例:
```
<template>
<van-sidebar v-model="activeKey" fixed="false" @change="handleChange">
<van-sidebar-item title="新手球拍" />
<van-sidebar-item title="进阶球拍" />
<van-sidebar-item title="高级球拍" />
</van-sidebar>
</template>
<script>
export default {
data() {
return {
activeKey: 0, // 默认选中第一个选项卡
data1: '新手球拍的数据',
data2: '进阶球拍的数据',
data3: '高级球拍的数据'
}
},
methods: {
handleChange(index) {
// 根据选中项的索引值修改对应的数据
if (index === 0) {
this.data = this.data1;
} else if (index === 1) {
this.data = this.data2;
} else if (index === 2) {
this.data = this.data3;
}
}
}
}
</script>
```
这样,当用户点击不同的选项卡时,页面会切换展示不同的数据。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)