- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <title>vue 选项卡 </title>
- <script src="vue.js"></script>
- <style type="text/CSS">
- *{margin:0; padding:0;}
- ul,ol,li{list-style:none;}
- .tabWrap{width:400px; height:200px; position:relative;box-shadow:0 0 1px #000; margin:30px auto;}
- .tabWrap ul,ol{ position:absolute; }
- .tabWrap ul{ left:0; top:0; }
- .tabWrap ol{ top: 50px; }
- .tabWrap ul li{ height:50px; line-height:50px; text-align:center; background:#ccc; float:left; width:100px;}
- .tabWrap ul li.active{ background:#fff; border-top:3px solid #345; }
- .tabWrap div{ padding:10px; }
- .tabWrap div p{ width:100%; height:100%;padding-top:40px;}
- </style>
- </head>
- <body>
- <div id="app">
- <tabs></tabs>
- <tabs></tabs>
- <tabs></tabs>
- </div>
- </body>
- </html>
- <script>
- Vue.component("tabs",{
- data(){
- return {
- dataList:[
- {title:"新闻",cont:"新闻新闻新闻新闻新闻",isChecked:true},
- {title:"体育",cont:"体育体育体育体育体育体育",isChecked:false},
- {title:"军事",cont:"军事军事军事军事军事军事军事",isChecked:false},
- {title:"要闻",cont:"要闻要闻要闻要闻要闻要闻",isChecked:false},
- ]
- }
- },
- methods:{
- show(tab){
- this.dataList.forEach(function(item){
- item.isChecked=false
- })
- tab.isChecked=true
- }
- },
- template:`
- <div class="tabWrap">
- <ul>
- <li v-for="item in dataList" @click="show(item)" v-bind:class="{active:item.isChecked}">{{item.title}}</li>
- </ul>
- <div>
- <p v-for="item in dataList" v-show="item.isChecked">{{item.cont}}</p>
- </div>
- </div>`
- })
- new Vue({
- el:"#app"
- })
- </script>
来源: http://www.qdfuns.com/article/46108/381c03827e58c19ba985bba121d01dfd.html