vue 折叠效果

最新推荐文章于 2024-08-28 08:03:19 发布

sunlizhen

最新推荐文章于 2024-08-28 08:03:19 发布

阅读量849

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/sunlizhen/article/details/96329611

版权

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

摘要由CSDN通过智能技术生成

<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[in