<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click=goBack>返回</button>
<ul v-for="list in mainList">
<p>{{ list.name }}</p>
<li v-for="items in list.child" @click="clickLi(items.child)">{{ items.title }}</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el: '#app',
data () {
return {
// 用來渲染的列表
mainList: [
{
name: '列表1',
child: [
{ title: '項目一', child: 'list1' },
{ title: '項目二', child: 'list2' },
{ title: '項目三', child: 'list3' },
{ title: '項目四' },
{ title: '項目五' }
]
},
{
name: '列表2',
child: [
{ title: '項目一' },
{ title: '項目二' },
{ title: '項目三' },
{ title: '項目四' },
{ title: '項目五' }
]
},
{
name: '列表3',
child: [
{ title: '項目一' },
{ title: '項目二' },
{ title: '項目三' },
{ title: '項目四' },
{ title: '項目五' }
]
}
],
// 上一步的列表
prevList: null,
allList: {
list1: [
{
name: '列表1',
child: [
{ title: '項目一', child: 'list1' },
{ title: '項目二', child: 'list2' },
{ title: '項目三', child: 'list3' },
{ title: '項目四' },
{ title: '項目五' }
]
},
{
name: '列表2',
child: [
{ title: '項目一' },
{ title: '項目二' },
{ title: '項目三' },
{ title: '項目四' },
{ title: '項目五' }
]
},
{
name: '列表3',
child: [
{ title: '項目一' },
{ title: '項目二' },
{ title: '項目三' },
{ title: '項目四' },
{ title: '項目五' }
]
}
],
list2: [
{
name: '列表a',
child: [
{ title: '項目一', child: 'list1' },
{ title: '項目二', child: 'list2' },
{ title: '項目三', child: 'list3' },
{ title: '項目四' },
{ title: '項目五' }
]
}
],
list3: [
{
name: '列表I',
child: [
{ title: '項目一', child: 'list1' },
{ title: '項目二', child: 'list2' },
{ title: '項目三', child: 'list3' },
{ title: '項目四' },
{ title: '項目五' }
]
},
{
name: '列表II',
child: [
{ title: '項目一' },
{ title: '項目二' },
{ title: '項目三' },
{ title: '項目四' },
{ title: '項目五' }
]
}
],
},
}
},
methods: {
clickLi (child) {
console.log(child)
if (child) {
this.prevList = this.mainList;
this.mainList = this.allList[child];
} else {
alert('暫時沒有子項目');
}
},
goBack () {
if (this.prevList) {
this.mainList = this.prevList;
this.prevList = null;
}
}
}
});
</script>
</body>
</html>