<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
vue 折叠效果
最新推荐文章于 2024-08-28 08:03:19 发布
本文详细介绍了如何在Vue项目中实现折叠效果,包括使用v-show和v-if指令控制元素显示,以及结合transition组件平滑过渡。同时,文章还探讨了如何自定义事件来控制子组件的折叠状态,为开发者提供了实用的示例代码和步骤解析。
摘要由CSDN通过智能技术生成