vue 折叠效果

原创

于 2019-07-17 17:13:18 发布 · 882 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在Vue项目中实现折叠效果，包括使用v-show和v-if指令控制元素显示，以及结合transition组件平滑过渡。同时，文章还探讨了如何自定义事件来控制子组件的折叠状态，为开发者提供了实用的示例代码和步骤解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="folding">
    <div v-for="(item,index) in message" :key="index" class="change">
      <span @click="Click(index)">{
 
 {item.title}}</span>
      <transition name="fade">
        <p v-show="item.showContent">{
 
 {item.content}}</p>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'folding',
  data () {
    return {
      message: [
        {'title': '标题1', content: '我是内容1', 'showContent': false},
        {'title': '标题2', content: '我是内容2', 'showContent': false},
        {'title': '标题3', content: '我是内容3', 'showContent': false}
      ],
      n: 0,
    }
  },
  methods: {
    Click: function (index) {
      let temp = this.message
      temp[index].showContent = !temp[index].showContent
    }
  }
}
</script>

<style scoped>
  *{
    padding: 0;
    margin: 0;
  }
  .folding{
    width: 400px;
    height: 800px;
    borde