<template>
<div class="tabs-contents">
<!-- 調用tabs組件 -->
 <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'>
 <div class="tabs-body">
 <div v-if='navData[0].showFlag>0'>
 <div class="one-content">
 <p>二十國集團領導人第十一次峰會將于9月4日至5日在浙江杭州舉行。峰會主題為“構建創(chuàng)新、活力、聯(lián)動、包容的世界經(jīng)濟”。二 十國集團成員和嘉賓國領導人及有關國際組織負責人將應邀與會。中國國家主席將出席并主持會議，并出席金磚國家領導人非正式會晤等有關活動。二十國集團工商峰會將于9月3日至4日在浙江杭州舉行。中國國家主席將出席開幕式并發(fā)表主旨演講。部分二十國集團成員和嘉賓國領導人及有關國際組織負責人將應邀與會。 </p>
 </div>
 </div>
 <div v-if='navData[1].showFlag>0'>
 <div class="two-content">
 <p>黨員領導干部</p>
 <div>
 盤點歷屆奧運會中國乒乓球隊精彩比賽瞬間。2016里約奧運會乒乓球男團半決賽，中國3-0韓國晉級，張繼科遭遇韓國小將鄭榮植的頑強阻擊，在兩度落后的情況下，苦戰(zhàn)五局才得以3：2涉險過關。圖為張繼科精彩比賽瞬間。
 </div>
 </div>
 </div>
 <div v-if='navData[2].showFlag>0'>
 <label class="glyphicon glyphicon-asterisk"></label>
 <span class="glyphicon glyphicon-remove"></span>
 <div class="two-content">
 <p>都說程序員有三寶：人傻，錢多，死得早。博主身邊的程序“猿”一大半應了這三寶，這從側面說明了一個問題，只有理性是過不好日子的。朋友們應該把工作與生活分開，讓生活變得感性，讓工作變得理性，兩者相提并行，豈不快哉?？龋掝}扯得有點遠，今天博主給大家寫一篇關于css如何設置select、radio 、 checkbox 、file樣式的問題，這里不涉及模擬框，僅介紹原生情況下如何做到自定義樣式，廢話不多說，賴次夠！</p>
 <div>
 北京時間8月16日早上，中國游泳隊抵達北京，隊員們一走出到達出口就被熱情的粉絲們蜂擁圍堵，尤其是寧澤濤、傅園慧等高人氣運動員，更是寸步難行。供圖：視覺中國
 </div>
 </div>
 </div>
 <div v-if='navData[3].showFlag>0'>
 <div class="form-horizontal">
 <div class="form-group">
 <label class="col-sm-3 control-label"><span class='add-people-sign'>*</span>姓名:</label>
 <div class="col-sm-2"><input type="text" class="form-control"></div>
 </div>
 </div>
 </div>
 </div>
 </tabs>

</div>
</template>
<script>
import tabs from './yezitabs.vue' //引入組件
export default {
 components: {
 tabs,
 },
 ready: function() {
 },
 methods: {
 },
 data() {
 return {
 tabsShowFlag:true,
 navTitle:'新聞',
 navData: [{
 key: 'biubiu',
 showFlag: 1,
 }, {
 key: '豆豆打豆豆',
 showFlag: -1,
 }, {
 key: '單身汪',
 showFlag: -1
 },{
 key: '喵嘞個咪',
 showFlag: -1
 }],
 }
 },
}
</script>
<style scoped>
</style>

<template>
<div class="tabs-content" v-if='flag'>
 <div class="top">
 <div class="title">{{navtitle}}</div>
 <ul class="nav nav-tabs">
 <li v-for='(navindex,nav) in navdata' class="nav-li" v-bind:class='{active:nav.showFlag>=0}' @click='keyShowFun(navindex)'>
 <a href="#">{{nav.key}}</a>
 </li>
 </ul>
 </div>
 <div class="v-tabs-item">
 <slot></slot>
 </div>
</div>
</template>
<script>
export default {
 props: {
 flag: {
 type: Boolean,
 required: true,
 twoWay: true
 },
 navtitle: {
 type: String,
 default: ''
 },
 navdata: {
 type: Array,
 required: true,
 },
 },
 components: {

 },
 ready: function() {

 },
 methods: {
 keyShowFun:function(index){
 let _this=this;
 _this.navdata.forEach(function(item){
 item.showFlag=-1;
 });
 _this.navdata[index].showFlag=1;
 }
 },
 data() {
 return {
 }
 },
}
</script>
<style scoped>

</style>