快捷導(dǎo)航

vue.js實(shí)現(xiàn)選項(xiàng)卡切換

更新時(shí)間：2022年03月01日 14:36:51 作者：軒轅秋風(fēng)淚

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

因?yàn)榍岸苏n要交一個(gè)大作業(yè)，剛好工作室的項(xiàng)目需要一個(gè)后臺(tái)管理界面，就自學(xué)了一下vue，今天做了一個(gè)選項(xiàng)卡切換，最開始的作為菜雞是用的js做的，太難了T.T，后面學(xué)了bootstrap就直接用的組件。今天用了感覺太棒了！比bootstrap的組件好用?。。?/p>

一、實(shí)現(xiàn)原理

我是用的點(diǎn)擊事件進(jìn)行更改data數(shù)據(jù)的值，v-if指令根據(jù)數(shù)據(jù)的變化來顯示/隱藏內(nèi)容的

1、設(shè)置1個(gè)content數(shù)組，用來存儲(chǔ)6個(gè)選項(xiàng)內(nèi)容是否顯示的boolean值，默認(rèn)第一個(gè)顯示

new Vue({
? el:".body",
? ? data:{
? ? a:123,
? ? content:[true,false,false,false,false,false]
? }
}

2、在選項(xiàng)內(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)計(jì)
? ? </div>
? ? <div v-show="content[4]" class="h-100" id="">
? ? ? ? ? 運(yùn)營(yíng)
? ? ?</div>
? ? ?<div v-show="content[5]" class="h-100" id="">
? ? ? ? ? 后臺(tái)管理賬戶，權(quán)限
? ? ?</div>
</div>

3、在methods中寫一個(gè)點(diǎn)擊事件，根據(jù)事件的參數(shù)，把相應(yīng)位置的content值為true，其他置為false

這里遇到一個(gè)錯(cuò)誤，直接賦值會(huì)無效，因?yàn)閐ata中的數(shù)組不能夠通過下標(biāo)直接更改數(shù)組中的數(shù)據(jù)，要通過this.$set(this.arr,index,newVal);方法來設(shè)置，或者直接賦值新數(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、選項(xiàng)綁定點(diǎn)擊事件

<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)計(jì)</a></li>
? <li class="bg-warning "><a @click="switchItem (4)" href="#operate">運(yùn)營(yíng)</a></li>
? <li class="bg-info"><a @click="switchItem (5)" href="#system">系統(tǒng)設(shè)置</a></li>
</ul>