<div @click.stop='showBox("shoptypeBox")'>达人说</div>
<div @click.stop='showBox("industryBox")'>分类</div>
<div @click.stop='showBox("sortBox")'>排序</div>
<div v-if='shoptypeBox'>1</div>
<div v-if='industryBox'>2</div>
<div v-if='sortBox'>3</div>
data{
shoptypeBox:false,
industryBox:false,
sortBox:false,
}
showBox(type){
先3个参数都改为false
this[type]=true
}
<div @click.stop='showBox("industryBox")'>分类</div>
<div @click.stop='showBox("sortBox")'>排序</div>
<div v-if='shoptypeBox'>1</div>
<div v-if='industryBox'>2</div>
<div v-if='sortBox'>3</div>
data{
shoptypeBox:false,
industryBox:false,
sortBox:false,
}
showBox(type){
先3个参数都改为false
this[type]=true
}
本文介绍了一个简单的前端页面交互案例,通过点击不同的元素来显示相应的菜单。使用Vue.js实现元素状态管理和显示隐藏逻辑。
1187

被折叠的 条评论
为什么被折叠?



