多個元素的過渡

??對于原生標(biāo)簽可以使用 v-if/v-else 。最常見的多標(biāo)簽過渡是一個列表和描述這個列表為空消息的元素：

<transition><table v-if="items.length > 0"><!-- ... --></table><p v-else>Sorry, no items found.</p> </transition>

可以這樣使用，但是有一點(diǎn)需要注意：

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

示例：

<transition><button v-if="isEditing" key="save">Save</button><button v-else key="edit">Edit</button> </transition>

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

<transition><button v-bind:key="isEditing">{{ isEditing ? 'Save' : 'Edit' }}</button> </transition>

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

<transition><button v-if="docState === 'saved'" key="saved">Edit</button><button v-if="docState === 'edited'" key="edited">Save</button><button v-if="docState === 'editing'" key="editing">Cancel</button> </transition>

可以重寫為：

<transition><button v-bind:key="docState">{{ buttonMessage }}</button> </transition> // ... computed: {buttonMessage: function () {switch (this.docState) {case 'saved': return 'Edit'case 'edited': return 'Save'case 'editing': return 'Cancel'}} }

過渡模式

同時生效的進(jìn)入和離開的過渡不能滿足所有要求，所以 Vue 提供了 過渡模式

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

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

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

<transition name="fade" mode="out-in"><!-- ... the buttons ... --> </transition>

總結(jié)

以上是生活随笔為你收集整理的Vue多个元素的过渡的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。