vue-选项卡案例
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="css/reset.css"> -->
<title>watch</title>
<style>
.tabBox{
box-sizing: border-box;
width: 600px;
margin: 20px auto;
}
.tabBox .tab{ display: flex; position: relative; top: 1px; margin: 0; padding: 0; }
.tabBox .tab li { list-style: none; padding: 0; margin: 0; padding: 0 20px; line-height: 35px; margin-right: 10px; border: 1px solid #aaa; background-color: #eee; cursor: pointer; }
.tabBox .tab li.active{ background-color: #fff; border-bottom-color: #fff ; }
.tabBox .content{ display: none; box-sizing: border-box; padding: 10px; height: 300px; border: 1px solid #aaa; }
.tabBox .content.active{ display: block; }
</style> </head> <body> <div id="app"> <div class="tabBox"> <ul class="tab" > <li @click="handle(index)" :class="{active:curIndex === index}" v-for="(item,index) in TAB_DATA" v-text="item.name"></li> </ul> <div :class="{content:true,active:curIndex === index}" v-for="(item,index) in TAB_DATA" v-text="item.children"></div> </div>
</div> <script src="../../node_modules/vue/dist/vue.js"></script> <script> let TAB_DATA = [ { id:1, name:'音乐', children:'音乐的内容' }, { id:2, name:'影视', children:'影视的内容' }, { id:3, name:'动漫', children:'动漫的内容' }, { id:4, name:'纪录片', children:'纪录片的内容' } ];
let vm = new Vue({ el: "#app", data: { // 动态绑定的数据 TAB_DATA, // 展示选项卡的索引 curIndex:0 }, methods:{ handle(index){ this.curIndex = index } } });
</script> </body> </html>
.tabBox .tab{ display: flex; position: relative; top: 1px; margin: 0; padding: 0; }
.tabBox .tab li { list-style: none; padding: 0; margin: 0; padding: 0 20px; line-height: 35px; margin-right: 10px; border: 1px solid #aaa; background-color: #eee; cursor: pointer; }
.tabBox .tab li.active{ background-color: #fff; border-bottom-color: #fff ; }
.tabBox .content{ display: none; box-sizing: border-box; padding: 10px; height: 300px; border: 1px solid #aaa; }
.tabBox .content.active{ display: block; }
</style> </head> <body> <div id="app"> <div class="tabBox"> <ul class="tab" > <li @click="handle(index)" :class="{active:curIndex === index}" v-for="(item,index) in TAB_DATA" v-text="item.name"></li> </ul> <div :class="{content:true,active:curIndex === index}" v-for="(item,index) in TAB_DATA" v-text="item.children"></div> </div>
</div> <script src="../../node_modules/vue/dist/vue.js"></script> <script> let TAB_DATA = [ { id:1, name:'音乐', children:'音乐的内容' }, { id:2, name:'影视', children:'影视的内容' }, { id:3, name:'动漫', children:'动漫的内容' }, { id:4, name:'纪录片', children:'纪录片的内容' } ];
let vm = new Vue({ el: "#app", data: { // 动态绑定的数据 TAB_DATA, // 展示选项卡的索引 curIndex:0 }, methods:{ handle(index){ this.curIndex = index } } });
</script> </body> </html>
标签：box,vue,选项卡,id,padding,案例,tabBox,border,children 来源： https://www.cnblogs.com/eric-share/p/14462405.html