Vue中多元素及多組件過(guò)渡的示例分析

這篇文章主要介紹了Vue中多元素及多組件過(guò)渡的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

10年的遂溪網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整遂溪建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“遂溪網(wǎng)站設(shè)計(jì)”,“遂溪網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

多元素的過(guò)渡

對(duì)于原生標(biāo)簽可以使用 v-if/v-else.但是有一點(diǎn)需要注意：

當(dāng)有相同標(biāo)簽名的元素切換時(shí)，需要通過(guò) key 特性設(shè)置唯一的值來(lái)標(biāo)記以讓 Vue 區(qū)分它們，否則 Vue 為了效率只會(huì)替換相同標(biāo)簽內(nèi)部的內(nèi)容。即使在技術(shù)上沒有必要，給在組件中的多個(gè)元素設(shè)置 key 是一個(gè)更好的實(shí)踐。

示例：


 
  Save
 
 
  Edit

在一些場(chǎng)景中，也可以給通過(guò)給同一個(gè)元素的 key特性設(shè)置不同的狀態(tài)來(lái)代替v-if和 v-else，上面的例子可以重寫為：


 
  {{ isEditing ? 'Save' : 'Edit' }}

使用多個(gè) v-if 的多個(gè)元素的過(guò)渡可以重寫為綁定了動(dòng)態(tài)屬性的單個(gè)元素過(guò)渡。例如：


 
  Edit
 
 
  Save
 
 
  Cancel

可以重寫為：


 
  {{ buttonMessage }}

computed: {
 buttonMessage: function () {
  switch (this.docState) {
   case 'saved': return 'Edit'
   case 'edited': return 'Save'
   case 'editing': return 'Cancel'
  }
 }
}

過(guò)渡模式

在元素之間的過(guò)渡中，還存在一個(gè)問(wèn)題：兩個(gè)元素都被重繪了，一個(gè)離開過(guò)渡的時(shí)候另一個(gè)開始進(jìn)入過(guò)渡。這是的默認(rèn)行為 - 進(jìn)入和離開同時(shí)發(fā)生。

有一種最原始的解決方法就是，在元素絕對(duì)定位在彼此之上的時(shí)候運(yùn)行正常。

還有一種方法就是使用Vue 提供的過(guò)渡模式.

in-out: 新元素先進(jìn)行過(guò)渡，完成之后當(dāng)前元素過(guò)渡離開。
out-in: 當(dāng)前元素先進(jìn)行過(guò)渡，完成之后新元素過(guò)渡進(jìn)入。

用 out-in重寫之前的開關(guān)按鈕過(guò)渡：

多元素過(guò)渡的例子

v-if和v-else的絕對(duì)定位實(shí)例


  
    {{show ? 'on' : 'off'}}

.my-div{
      position: relative;
    }
    .btn{
      position: absolute;
      left: 30px;
      top: 10px;
    }

    .fade-enter-active, .fade-leave-active{
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }

new Vue({
  el:'#app',
  data:{
    show : true
  }
})

多個(gè)v-if的例子


  
    {{btnContent}}

.my-div{
      position: relative;
    }
    .btn{
      position: absolute;
      left: 30px;
      top: 10px;
    }

    .fade-enter-active, .fade-leave-active{
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }

var app = new Vue({
  el:'#app',
  data:{
    key:'add'
  },
  computed:{
    btnContent:function () {
      switch (this.key){
        case 'add' : return 'Add'
        case 'edit' : return 'Edit'
        case 'delete' : return 'Delete'
      }
    }
  }
})

這里我沒有做對(duì)app.key的值的控制，所以想看過(guò)渡效果的話，可以在控制臺(tái)里修改app.key的值。

過(guò)渡模式的例子


  
    {{show ? 'on' : 'off'}}

多個(gè)組件的過(guò)渡簡(jiǎn)單很多 - 我們不需要使用 key 特性。相反，我們只需要使用動(dòng)態(tài)組件，情況一下例子:

var app = new Vue({ el:'#app', data:{ view:'v-a' }, components:{ 'v-a':{ template:'

component a

' }, 'v-b':{ template:'

component b

' }, } })

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue中多元素及多組件過(guò)渡的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)站建設(shè)知識(shí)

Vue中多元素及多組件過(guò)渡的示例分析

其他資訊