vue.js 实现点击展开收起动画效果

前端之家收集整理的这篇文章主要介绍了vue.js 实现点击展开收起动画效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起,其实就是显示和隐藏内容部分;说来惭愧,我花了半天时间才搞出来(自黑一下~),接下来分享给大家,先上效果图: @H_301_1@

@H_301_1@

vue页面: @H_301_1@

  1. <div class="title" @click="showHide(index)"&gt;
  2. <h3>2018年0{{index+6}}月</h3>
  3. <div class="number"&gt;800笔<i></i></div>
  4. </div>
  5. <div class="contant"&gt;
  6. <ul>
  7. <li v-for="i in item.allNumber"&gt;
  8. {{index+6}}
  9. </li>
  10. </ul>
  11. </div>
  12. </div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 @H_301_1@

猜你在找的Vue相关文章