panel----单个基础版

转载于 2017-04-13 22:14:00 发布 · 69 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luxiaoxiao/p/6706476.html

文章标签：

#javascript #ViewUI

本文介绍如何使用Vue.js实现元素的显示隐藏切换功能，并通过过渡动画增强用户体验。利用@click事件触发toggle方法改变active状态，从而控制描述内容的显示与隐藏。同时，运用CSS transition实现淡入淡出的效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
li {
list-style: none;
width: 100%;
}
.des {
width: 100%;
height: 50px;
background-color: grey;
display: none;
}
.show {
display: block;
}
/*淡入淡出效果*/
.fade-enter-active, .fade-leave-active {
transition: all .2s;
}
.fade-enter, .fade-leave-active {
opacity: 0;
height: 0px;
}
</style>
</head>
<body>
<div id="app">
<div>
<li>
<p @click="toggle">{{title}}</p>
<transition name="fade">
<div class='des' :class='{show:active}'>
{{text}}
</div>
</transition>
</li>
</div>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
title:'aaaaaa',
text:'dcvgg',
active:false,
},
methods:{
toggle:function(){
this.active=!this.active;
}
}
})
</script>
</html>