使用vue元件來寫一個摺疊面板
阿新 • • 發佈：2019-01-21
一、之前在寫摺疊面板時都是使用的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="cp-p" id="' + divId + '">' + data + '</div></br>';
a.appendChild(li);
a.appendChild(kqdata);
}
document.getElementById('li0').onclick = function() {
$('#div0').slideToggle();
}
三、使用vue重構時寫的demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue元件實現摺疊面板</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="http://cdn.bootcss.com/vue/2.0.3/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="i in mainData">
<c1 :item="i">
<p>{{ i }}</p>
</c1>
</div>
</div>
<template id="c1">
<div>
<button type="button" @click="open=!open">{{ open ? 'hide' : 'show' }}</button>
<div v-show="open">
<slot></slot>
</div>
</div>
</template>
<script>
Vue.component('c1', {
template: '#c1',
data() {
return {
open: true
}
}
})
var vm = new Vue({
el: '#app',
data: {
mainData:[1,2,3,4]
}
})
</script>
</body>
</html>
四、效果圖
之前上傳圖片都不顯示，這裡把上面的demo在網頁裡面開啟即可，
二、附上之前的程式碼段
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="cp-p" id="' + divId + '">' + data + '</div></br>';
a.appendChild(li);
a.appendChild(kqdata);
}
document.getElementById('li0').onclick = function() {
$('#div0').slideToggle();
}
三、使用vue重構時寫的demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue元件實現摺疊面板</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="http://cdn.bootcss.com/vue/2.0.3/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="i in mainData">
<c1 :item="i">
<p>{{ i }}</p>
</c1>
</div>
</div>
<template id="c1">
<div>
<button type="button" @click="open=!open">{{ open ? 'hide' : 'show' }}</button>
<div v-show="open">
<slot></slot>
</div>
</div>
</template>
<script>
Vue.component('c1', {
template: '#c1',
data() {
return {
open: true
}
}
})
var vm = new Vue({
el: '#app',
data: {
mainData:[1,2,3,4]
}
})
</script>
</body>
</html>
四、效果圖
之前上傳圖片都不顯示，這裡把上面的demo在網頁裡面開啟即可，