1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style type="text/css">
*{ margin: 0; padding: 0; } li{ list-style: none; } .list{ height: 30px; line-height: 30px; } .list li{ padding:0 10px; margin: 0 10px; border-bottom: 2px solid transparent; } .list li.on{ border-bottom: 2px solid blue; color: orange; } .flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; display: box; flex-wrap:wrap; } .flexC { -webkit-box-pack: center; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; }
</style>
</head>
<body>
<div id="app">
<ul class="list flex flexC">
<li :class="{'on':current==index}" v-for="(item,index) in list" @click="tabclick(index)">{{item}}</li>
</ul>
<ul class="tab_body">
<li>我是 {{msg}}</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
list:["歌单","收藏","应用"],
current:0,
msg:'歌单'
},
methods:{
tabclick:function(aa){
vm.current=aa;
vm.msg=vm.list[aa];
}
}
})
</script>
</body>
</html>2.效果
