vue实现手风琴

最新推荐文章于 2025-06-06 08:17:28 发布

原创最新推荐文章于 2025-06-06 08:17:28 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

20 篇文章

订阅专栏

原理：为每一个项传入特定序号，实现特定项的展示（手风琴效果）
（使用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>