<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
li {
list-style: none;
text-align: center;
}
#box {
width: 280px;
margin: 50px auto;
background: lightblue;
}
#box:after {
content: '';
height: 0;
clear: both;
visibility: hidden;
display: block;
}
#title li {
width: 50px;
height: 30px;
float: left;
padding: 20px 15px;
}
#title li:hover {
background: lightcoral;
}
#content {
display: block;
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<ul id="title">
<li v-for='(item,index) in list' v-on:click='changeContent(index)'>{{index}}</li>
</ul>
<ul id="content">
<li v-for='(item,index) in list[str]'>{{item}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#box',
data: {
list: {
'movie': ['aaa', 'bbb', 'ccc', 'ddd', 'aaa', 'bbb', 'ccc', 'ddd', 'aaa', 'bbb', 'ccc',
'ddd', 'aaa', 'bbb', 'ccc', 'ddd'
],
'game': ['eee', 'fff', 'ggg', 'hhh', 'eee', 'fff', 'ggg', 'hhh', 'eee', 'fff', 'ggg',
'hhh', 'eee', 'fff', 'ggg', 'hhh', 'eee', 'fff', 'ggg', 'hhh'
],
'music': ['iii', 'jjj', 'kkk', 'lll', 'mmm', 'iii', 'jjj', 'kkk', 'lll', 'mmm', 'iii',
'jjj', 'kkk', 'lll', 'mmm', 'iii', 'jjj', 'kkk', 'lll', 'mmm', 'iii', 'jjj',
'kkk', 'lll', 'mmm'
]
},
str: ''
},
methods: {
changeContent(data) {
this.str = data;
}
}
});
</script>
</body>
</html>