Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果

更新時(shí)間：2016年12月01日 17:26:38 作者：愛喝酸奶的吃貨

這篇文章主要為大家詳細(xì)介紹了Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

今天給大家分享一個(gè)小穎自己寫的vue組件,因?yàn)樾》f也才接觸vue沒多久,如果有什么不足的地方,希望大家提出來,小穎加以改正.以下就是具體如何實(shí)現(xiàn)tabs啦。

調(diào)用示例:

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

實(shí)現(xiàn)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>

效果圖：