使用vue组件来写一个折叠面板

一、之前在写折叠面板时都是使用的JQ的slideToggle，昨天对这一块代码进行重构，使用vue来进行开发
二、附上之前的代码段
for (var i = 0; i < ret.rows.length; i++) {
var liId = 'li' + i,
divId = 'div' + i;
var data = '应出勤:' + ret.rows[i].empNum + ', 实出勤:' + ret.rows[i].onworkNum + ', 请假:' + ret.rows[i].vacNum + ', 出差:' + ret.rows[i].otNum + ', 缺卡:' + ret.rows[i].nocardNum;
var li = document.createElement('li');
li.innerHTML = '<div class="cp-depart" id="' + liId + '"><div class="cp-depart-p">' + ret.rows[i].departName + ' 出勤率:' + (ret.rows[i].onworkNum / ret.rows[i].empNum * 100).toFixed(2) + '%</div></div>';
var kqdata = document.createElement('li');
kqdata.innerHTML = '<div class=