vue.js實現(xiàn)選項卡切換
更新時間：2022年03月01日 14:36:51 作者：軒轅秋風淚
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)選項卡切換功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
因為前端課要交一個大作業(yè)，剛好工作室的項目需要一個后臺管理界面，就自學了一下vue，今天做了一個選項卡切換，最開始的作為菜雞是用的js做的，太難了T.T，后面學了bootstrap就直接用的組件。今天用了感覺太棒了！比bootstrap的組件好用！?。?/p>
一、實現(xiàn)原理
我是用的點擊事件進行更改data數(shù)據(jù)的值，v-if指令根據(jù)數(shù)據(jù)的變化來顯示/隱藏內(nèi)容的
1、設置1個content數(shù)組，用來存儲6個選項內(nèi)容是否顯示的boolean值，默認第一個顯示
new Vue({
? el:".body",
? ? data:{
? ? a:123,
? ? content:[true,false,false,false,false,false]
? }
}2、在選項內(nèi)容中使用v-if指令
<div class="main-content h-100"> ? ? <div v-show="content[0]" class="h-100 bg-warning" id="item-user"> ? ? ? ? 用戶中心 ? ? <div v-show="content[1]" class="h-100" id=""> ? ? ? ? 內(nèi)容管理 ? ? </div> ? ? <div v-show="content[2]" class="h-100" id=""> ? ? ? ? ?消息推送 ? ? </div> ? ? <div v-show="content[3]" class="h-100" id=""> ? ? ? ? ? 數(shù)據(jù)統(tǒng)計 ? ? </div> ? ? <div v-show="content[4]" class="h-100" id=""> ? ? ? ? ? 運營 ? ? ?</div> ? ? ?<div v-show="content[5]" class="h-100" id=""> ? ? ? ? ? 后臺管理賬戶，權限 ? ? ?</div> </div>
3、在methods中寫一個點擊事件，根據(jù)事件的參數(shù)，把相應位置的content值為true，其他置為false
這里遇到一個錯誤，直接賦值會無效，因為data中的數(shù)組不能夠通過下標直接更改數(shù)組中的數(shù)據(jù)，要通過this.$set(this.arr,index,newVal);方法來設置，或者直接賦值新數(shù)組
new Vue({
? ? ? ? el:".body",
? ? ? ? data:{
? ? ? ? ? ? a:123,
? ? ? ? ? ? content:[true,false,false,false,false,false]
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? switchItem:function (item) {
? ? ? ? ? ? ? ? console.log(item)
? ? ? ? ? ? ? ? for (let i = 0; i <6; i++) {
? ? ? ? ? ? ? ? ? ? if(i==item){
? ? ? ? ? ? ? ? ? ? ? ? this.$set(this.content,i,true);
? ? ? ? ? ? ? ? ? ? } else{
? ? ? ? ? ? ? ? ? ? ? ? this.$set(this.content,i,false);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
?})4、選項綁定點擊事件
<ul class="list-unstyled left-ul"> ? <li class="bg-warning nav-item"><a @click="switchItem (0)" href="#person">用戶中心</a></li> ? <li class="bg-info "><a @click="switchItem (1)" href="#content">內(nèi)容管理</a></li> ? <li class="bg-dark "><a @click="switchItem (2)" href="#notification">消息推送</a></li> ? <li class="bg-success "><a @click="switchItem (3)" href="#data">數(shù)據(jù)統(tǒng)計</a></li> ? <li class="bg-warning "><a @click="switchItem (4)" href="#operate">運營</a></li> ? <li class="bg-info"><a @click="switchItem (5)" href="#system">系統(tǒng)設置</a></li> </ul>
二、實現(xiàn)效果
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了Vue3編程流暢技巧使用setup語法糖拒絕寫return的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue引入路徑正確但一直報錯問題:Already included file name&n
這篇文章主要介紹了Vue引入路徑正確但一直報錯:Already included file name ‘××ב differs from file name ‘××ב only in casing.具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了Vue路由與a標簽鏈接錨點發(fā)生沖突問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue pinia模塊化全局注冊，Pinia是Vue.js團隊成員專門為Vue開發(fā)的一個全新的狀態(tài)管理庫，并且已經(jīng)被納入官方github2023-02-02
這篇文章主要為大家詳細介紹了vue3限制table表格選項個數(shù)的解決方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue3中的defineExpose使用,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
本文通過實例代碼給大家介紹了在vue中使用echarts圖表的方法，需要注意的事項文中給大家提到,需要的朋友可以參考下2018-10-10
本文介紹了VUE中組件的基本使用以及個人對VUE組件的理解,希望能幫助到大家2019-02-02
Vue實戰(zhàn)之項目開發(fā)時常見的幾個錯誤匯總
vue作為前端主流的3大框架之一,目前在國內(nèi)有著非常廣泛的應用,下面這篇文章主要給大家介紹了關于Vue實戰(zhàn)之項目開發(fā)時常見的幾個錯誤匯總的相關資料,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue中push()和splice()的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09