亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果

 更新時(shí)間:2021年05月03日 11:00:54   作者:水冗水孚  
這篇文章主要介紹了vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果的方法,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下

問題描述

tab切換的場(chǎng)景在開發(fā)中會(huì)經(jīng)常用到。當(dāng)需要實(shí)現(xiàn)這種效果的時(shí)候,我們常常會(huì)想到下面的方式去實(shí)現(xiàn)這個(gè)效果。

  • 方式一 使用display:none;去控制dom元素的顯示與隱藏。從而實(shí)現(xiàn),兩個(gè)tab的顯示與隱藏。不過如果有三四個(gè)tab要切換的話,這種方式就不可取了。
  • 方式二 使用vue中的指令v-if或者v-show實(shí)現(xiàn)。這種方式可以實(shí)現(xiàn),不過代碼寫的不優(yōu)雅。試想一個(gè).vue文件中出現(xiàn)一大把v-if是什么樣的效果?而且使用v-if還得聲明很多的變量去做標(biāo)識(shí)。所以不是十分好的的解決方案
  • 方式三 使用elementui或者iview中的tab切換組件 這種方式也還行,不過有的時(shí)候需要/deep/改樣式,就有點(diǎn)麻煩了。

筆者認(rèn)為,使用vue的動(dòng)態(tài)組件去實(shí)現(xiàn)tab的切換效果,會(huì)比較方便。

什么是vue的動(dòng)態(tài)組件

vue的動(dòng)態(tài)組件,本質(zhì)上還是一個(gè)組件,組件通俗來說就是一塊具有js邏輯的UI視圖層。所謂動(dòng)態(tài)組件就是我們可以根據(jù)一些條件去動(dòng)態(tài)控制頁面的某個(gè)地方具體顯示那個(gè)組件。這樣說就有點(diǎn)tab切換的味道了。

應(yīng)用場(chǎng)景描述

需求效果圖

其實(shí)很簡單,就是一個(gè)tab切換的效果,當(dāng)然實(shí)際開發(fā)中,tab的樣式效果可能會(huì)稍微復(fù)雜點(diǎn)。

實(shí)現(xiàn)步驟

第一步(新建組件并引入注冊(cè))

首先在components文件夾下定義四個(gè).vue文件,作為tab切換呈現(xiàn)的內(nèi)容部分,引入既可使用。

新建

引入并注冊(cè)

import one from "./components/one";
import two from "./components/two";
import three from "./components/three";
import four from "./components/four";

components: {
    one,
    two,
    three,
    four,
  },

第二步(布局,上面放tab點(diǎn)擊的標(biāo)簽,下面放組件呈現(xiàn)對(duì)應(yīng)內(nèi)容)

<template>
  <div id="app">
    <div class="top">
     <!-- 放置tab點(diǎn)擊標(biāo)簽 -->
    </div>
    <div class="bottom">
      <!-- 放置動(dòng)態(tài)組件呈現(xiàn)對(duì)應(yīng)內(nèi)容 -->
    </div>
  </div>
</template>

第三步(寫好上面的tab點(diǎn)擊標(biāo)簽)

// 首先我們?cè)赿ata中定義數(shù)組cardArr存放點(diǎn)擊tab的數(shù)據(jù)
    data() {
        return {
          whichIndex: 0,
          cardArr: [
            {
              componentName: "動(dòng)態(tài)組件一",
            },
            {
              componentName: "動(dòng)態(tài)組件二",
            },
            {
              componentName: "動(dòng)態(tài)組件三",
            },
            {
              componentName: "動(dòng)態(tài)組件四",
            },
          ],
        };
      },
// 然后使用v-for循環(huán)出來呈現(xiàn)
    <template>
      <div id="app">
        <div class="top">
          <div
            class="crad"
            :class="{ highLight: whichIndex == index }"
            v-for="(item, index) in cardArr"
            :key="index"
            @click="whichIndex = index"
          >
            {{ item.componentName }}
          </div>
        </div>
        <div class="bottom">
          <!-- 放置動(dòng)態(tài)組件... -->
        </div>
      </div>
    </template>
// 又因?yàn)樾枰懈吡翣顟B(tài),所以初始我們就默認(rèn)讓索引為0的也就是第一個(gè)高亮,使用data中定義的whichIndex和:class實(shí)現(xiàn)
    // 高亮樣式
    .highLight {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -1px, 0);
    }

第四步(使用動(dòng)態(tài)組件標(biāo)簽 <component/> )

    // 動(dòng)態(tài)組件標(biāo)簽<component/>有一個(gè)is屬性,is的值為誰,就可以渲染誰,
    // 這里我們先用一個(gè)變量componentId存起來,componentId為誰,就呈現(xiàn)誰
    <div class="bottom">
        <component :is="componentId"></component>
    </div>
    
    // 我們默認(rèn)就讓第一個(gè)第一個(gè)呈現(xiàn)吧,同時(shí)需要讓cardList中的組件名和組件id對(duì)應(yīng)上,
    // 所以data中應(yīng)該修改成這樣
    data() {
        return {
          whichIndex: 0,
          componentId: "one", // 值就是我們?cè)赾omponents對(duì)象中注冊(cè)的引入的組件的名字
          cardArr: [
            {
              componentName: "動(dòng)態(tài)組件一",
              componentId: "one", // 要與之對(duì)應(yīng)
            },
            {
              componentName: "動(dòng)態(tài)組件二",
              componentId: "two", // 要與之對(duì)應(yīng)
            },
            {
              componentName: "動(dòng)態(tài)組件三",
              componentId: "three", // 要與之對(duì)應(yīng)
            },
            {
              componentName: "動(dòng)態(tài)組件四",
              componentId: "four", // 要與之對(duì)應(yīng)
            },
          ],
        };
      },

第五步(點(diǎn)擊某個(gè)tab組件,就動(dòng)態(tài)更改對(duì)應(yīng)componentId值即可)

<template>
  <div id="app">
    <div class="top">
      <div
        class="crad"
        :class="{ highLight: whichIndex == index }"
        v-for="(item, index) in cardArr"
        :key="index"
        @click="
          whichIndex = index;
          componentId = item.componentId; 
        "
      >
          <!-- @click在標(biāo)簽中可以寫多個(gè)操作代碼,以分號(hào)隔開即可 -->
        {{ item.componentName }}
      </div>
    </div>
    <div class="bottom">
    <!-- keep-alive緩存組件,這樣的話,組件就不會(huì)被銷毀,DOM就不會(huì)被重新渲染,
    瀏覽器也就不會(huì)回流和重繪,就可以優(yōu)化性能。不使用的話頁面加載就會(huì)慢一點(diǎn) -->
      <keep-alive>
        <component :is="componentId"></component>
      </keep-alive>
    </div>
  </div>
</template>

完整代碼附上

<template>
  <div id="app">
    <div class="top">
      <div
        class="crad"
        :class="{ highLight: whichIndex == index }"
        v-for="(item, index) in cardArr"
        :key="index"
        @click="
          whichIndex = index;
          componentId = item.componentId;
        "
      >
        {{ item.componentName }}
      </div>
    </div>
    <div class="bottom">
      <keep-alive>
        <component :is="componentId"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import one from "./components/one";
import two from "./components/two";
import three from "./components/three";
import four from "./components/four";
export default {
  components: {
    one,
    two,
    three,
    four,
  },
  data() {
    return {
      whichIndex: 0,
      componentId: "one",
      cardArr: [
        {
          componentName: "動(dòng)態(tài)組件一",
          componentId: "one",
        },
        {
          componentName: "動(dòng)態(tài)組件二",
          componentId: "two",
        },
        {
          componentName: "動(dòng)態(tài)組件三",
          componentId: "three",
        },
        {
          componentName: "動(dòng)態(tài)組件四",
          componentId: "four",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 50px;
  .top {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-around;
    .crad {
      width: 20%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background-color: #fff;
      border: 1px solid #e9e9e9;
    }
    .highLight {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -1px, 0);
    }
  }
  .bottom {
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 100px);
    border: 3px solid pink;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

以上就是vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果的詳細(xì)內(nèi)容,更多關(guān)于vue 動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • vue實(shí)現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例

    vue實(shí)現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例

    這篇文章主要介紹了vue實(shí)現(xiàn)簡易圖片左右旋轉(zhuǎn),上一張,下一張組件案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue使用nprogress實(shí)現(xiàn)進(jìn)度條

    vue使用nprogress實(shí)現(xiàn)進(jìn)度條

    這篇文章主要為大家詳細(xì)介紹了vue使用nprogress實(shí)現(xiàn)進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-12-12
  • elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實(shí)例

    elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實(shí)例

    這篇文章主要給大家介紹了關(guān)于elementUI給el-tabs/el-tab-pane添加圖標(biāo)效果實(shí)例的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用elementUI具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2023-07-07
  • vue中van-picker的選項(xiàng)插槽的使用

    vue中van-picker的選項(xiàng)插槽的使用

    這篇文章主要介紹了vue中van-picker的選項(xiàng)插槽的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • ant-design-vue前端UI庫,如何解決Table中時(shí)間格式化問題

    ant-design-vue前端UI庫,如何解決Table中時(shí)間格式化問題

    這篇文章主要介紹了ant-design-vue前端UI庫,如何解決Table中時(shí)間格式化問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue3中的hooks總結(jié)

    vue3中的hooks總結(jié)

    這篇文章主要介紹了vue3中的hooks總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • 詳解vue項(xiàng)目構(gòu)建與實(shí)戰(zhàn)

    詳解vue項(xiàng)目構(gòu)建與實(shí)戰(zhàn)

    這篇文章主要介紹了詳解vue項(xiàng)目構(gòu)建與實(shí)戰(zhàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-06-06
  • Vue中的事件處理詳情

    Vue中的事件處理詳情

    這篇文章主要介紹了Vue中的事件處理詳情,文章通過給按鈕綁定一個(gè)?click?事件展開詳細(xì)內(nèi)容介紹,需要的小伙伴可以參考一下
    2022-05-05
  • vue實(shí)現(xiàn)全屏滾動(dòng)效果(非fullpage.js)

    vue實(shí)現(xiàn)全屏滾動(dòng)效果(非fullpage.js)

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全屏滾動(dòng)效果,非fullpage.js,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • vue實(shí)現(xiàn)簡易的計(jì)算器功能

    vue實(shí)現(xiàn)簡易的計(jì)算器功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡易的計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-11-11

最新評(píng)論