Vue.js學習筆記（5）tabs組件

今天給大家分享一個小穎自己寫的vue組件,因為小穎也才接觸vue沒多久,如果有什么不足的地方,希望大家提出來,小穎加以改正.以下就是具體如何實現tabs啦,啦啦啦啦啦

調用示例:

<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日在浙江杭州舉行。峰會主題為“構建創新、活力、聯動、包容的世界經濟”。二 十國集團成員和嘉賓國領導人及有關國際組織負責人將應邀與會。中國國家主席將出席並主持會議，並出席金磚國家領導人非正式會晤等有關活動。二十國集團工商峰會將於9月3日至4日在浙江杭州舉行。中國國家主席將出席開幕式並發表主旨演講。部分二十國集團成員和嘉賓國領導人及有關國際組織負責人將應邀與會。 </p>
      </div>
    </div>
    <div v-if='navData[1].showFlag>0'>
      <div class="two-content">
        <p>黨員領導干部</p>
        <div>
          盤點歷屆奧運會中國乒乓球隊精彩比賽瞬間。2016里約奧運會乒乓球男團半決賽，中國3-0韓國晉級，張繼科遭遇韓國小將鄭榮植的頑強阻擊，在兩度落后的情況下，苦戰五局才得以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>

 

 實現tabs:

<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>