<!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;}
.tabbox{
display: -webkit-flex;
display: flex;
}
.tabli{
width: 200px;
background: lightblue;
height: 34px;
line-height: 34px;
align-items: center;
text-align:center;
}
</style>
</head>
<body>
<div id="app">
<ul v-bind:class='{tabbox:ulName}'>
<li v-for='(item,index) in items'
v-bind::key="item.id"
v-bind:class='{act:index==num,tabli:liName}'
v-on:click='tab(index)'
>{{item.message}}</li>
</ul>
<ul>
<li v-for='(tab,index) in tabBox'
v-bind::key="tab.id"
v-show='index==num'
>{{tab.message1}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
items:[
{message:1},
{message:2},
{message:3}
],
num:0,
liName:true,
ulName:true,
tabBox:[
{message1:'让我一个人'},
{message1:'我们是同类'},
{message1:'让我几个人醉'},
]
},
methods:{
tab:function(index){
console.log(index)
this.num = index;
}
}
})
</script>
</body>
</html>