原理:为每一个项传入特定序号,实现特定项的展示(手风琴效果)
(使用vue-cli 可直接复制查看效果)
<template>
<!--手风琴组件-->
<div class="hello">
<ul>
<li>
<span @click="toggle(1)">一条</span>
<div v-show="show===1">
一万
</div>
</li>
<li>
<span @click="toggle(2)">二条</span>
<div v-show="show===2">
贰万
</div>
</li>
<li>
<span @click="toggle(3)">三条</span>
<div v-show="show===3">
叁万
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
show:''
}
},
methods:{
toggle:function(index){
if(this.show===index){
this.show=0;
}
else{
this.show=index;
}
}
}
}
</script>
vue实现手风琴
最新推荐文章于 2022-09-08 15:03:05 发布