Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果
今天給大家分享一個(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>二十國(guó)集團(tuán)領(lǐng)導(dǎo)人第十一次峰會(huì)將于9月4日至5日在浙江杭州舉行。峰會(huì)主題為“構(gòu)建創(chuàng)新、活力、聯(lián)動(dòng)、包容的世界經(jīng)濟(jì)”。二 十國(guó)集團(tuán)成員和嘉賓國(guó)領(lǐng)導(dǎo)人及有關(guān)國(guó)際組織負(fù)責(zé)人將應(yīng)邀與會(huì)。中國(guó)國(guó)家主席將出席并主持會(huì)議,并出席金磚國(guó)家領(lǐng)導(dǎo)人非正式會(huì)晤等有關(guān)活動(dòng)。二十國(guó)集團(tuán)工商峰會(huì)將于9月3日至4日在浙江杭州舉行。中國(guó)國(guó)家主席將出席開幕式并發(fā)表主旨演講。部分二十國(guó)集團(tuán)成員和嘉賓國(guó)領(lǐng)導(dǎo)人及有關(guān)國(guó)際組織負(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ì)中國(guó)乒乓球隊(duì)精彩比賽瞬間。2016里約奧運(yùn)會(huì)乒乓球男團(tuán)半決賽,中國(guó)3-0韓國(guó)晉級(jí),張繼科遭遇韓國(guó)小將鄭榮植的頑強(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日早上,中國(guó)游泳隊(duì)抵達(dá)北京,隊(duì)員們一走出到達(dá)出口就被熱情的粉絲們蜂擁圍堵,尤其是寧澤濤、傅園慧等高人氣運(yùn)動(dòng)員,更是寸步難行。供圖:視覺中國(guó) </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>
效果圖:
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊兩個(gè)精彩的專題:javascript選項(xiàng)卡操作方法匯總 jquery選項(xiàng)卡操作方法匯總
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue-cli 腳手架項(xiàng)目-package.json
本篇文章主要介紹了詳解vue-cli 腳手架項(xiàng)目-package.json,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07如何解決Vue請(qǐng)求接口出現(xiàn)跨域問題Access-Control-Allow-Origin
這篇文章主要介紹了如何解決Vue請(qǐng)求接口出現(xiàn)跨域問題Access-Control-Allow-Origin,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10element多個(gè)table實(shí)現(xiàn)同步滾動(dòng)的示例代碼
本文主要介紹了element多個(gè)table實(shí)現(xiàn)同步滾動(dòng),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09vue實(shí)現(xiàn)滾動(dòng)鼠標(biāo)滾輪切換頁(yè)面
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滾動(dòng)鼠標(biāo)滾輪切換頁(yè)面,類似于縱向走馬燈,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12Vue3?+?elementplus實(shí)現(xiàn)表單驗(yàn)證+上傳圖片+?防止表單重復(fù)提交功能
這篇文章主要介紹了Vue3?+?elementplus?表單驗(yàn)證+上傳圖片+?防止表單重復(fù)提交,本文給大家展示效果圖和完整代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10el-dialog關(guān)閉再打開后窗口內(nèi)容不刷新問題及解決
這篇文章主要介紹了el-dialog關(guān)閉再打開后窗口內(nèi)容不刷新問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02vue3?setup語(yǔ)法糖之組件傳參(defineProps、defineEmits、defineExpose)示例詳
defineProps?和?defineEmits?都是只能在?<script?setup>?中使用的編譯器宏,他們不需要導(dǎo)入,且會(huì)隨著?<script?setup>?的處理過程一同被編譯掉,這篇文章主要介紹了vue3?setup語(yǔ)法糖之組件傳參(defineProps、defineEmits、defineExpose)示例詳解,需要的朋友可以參考下2023-01-01