场景:点击菜单切换内容
事件驱动:在菜单的tab上面添加click事件控制内容的显示和隐藏,达到点击不同tab切换不同内容的目的。
数据驱动:以vue为例
<van-tabs v-model="activeName">
<van-tab title="标签 1" name="a">内容 1</van-tab>
<van-tab title="标签 2" name="b">内容 2</van-tab>
<van-tab title="标签 3" name="c">内容 3</van-tab>
</van-tabs>
<button @click="change"/>
export default {
data() {
return {
activeName: 'a',
};
},
};
//改变activeName的值
method:{
change(){
this.activeName=b
}
}
点击按钮改变数据activeName的值,便切换到了内容b。