Vue學習筆記高階篇之多元素及多元件過渡

本文介紹了vue 多元素及多元件過渡，這個地方知識點www.cppcns.com挺多的，而且很重要，所以，今天新增一點小筆記。

多元素的過渡

對於原生標籤可以使用v-if/v-else.但是有一點需要注意：

當有相同標籤名的元素切換時，需要通過 key 特性設定唯一的值來標記以讓 vue 區分它們，否則 vue 為了效率只會替換相同標籤內部的內容。即使在技術上沒有必要，給在 元件中的多個元素設定 key 是乙個更好的實踐。

示例：

在一些場景中，也可以給通過給同乙個元素的 key特性設定不同的狀態來代替v-if和 v-else，上面的例子可以重寫為：

使用多個 v-if 的多個元素的過渡可以重寫為繫結了動態屬性的單個元素過渡。 例如：

cancel

可以重寫為：

computed: zzrrbvjgw

}}過渡模式

在元素之間的過渡中，還存在乙個問題：兩個元素都被重繪了，乙個離開過渡的時候另乙個開始進入過渡。這是 的預設行為 - 進入和離開同時發生。

有一種最原始的解決方法就是，在元素絕對定位在彼此之上的時候執行正常。

還有一種方法就是使用vue 提供的過渡模式.

用 out-in重寫之前的開關按鈕過渡：

多元素過渡的例子

v-if和v-else的絕對定位例項

.my-div

.btn

.fade-enter-active, .fade-le**e-active

.fade-enter, .fade-le**e-to

new vue(

})多個v-if的例子

class="btn" :key="key" >}

.my-div

.btn

.fade-enter-active, .fade-le**e-active

.fade-enter, .fade-le**e-to

var app = new vue(,

computed:

}}})

這裡我沒有做對app.key的值的控制，所以想看過渡效果的話，可以在控制台裡修改app.key的值。

過渡模式的例子

.fade-enter-active, .fade-le**e-active

.fade-enter, .fade-le**e-to

new vue(

})多元件過渡

多個元件的過渡簡單很多 - 我們不需要使用 key 特性。相反，我們只需要使用動態元件，情況一下例子:

.fade-enter-active, .fade-le**e-active

.fade-enter, .fade-le**e-to

var app = new vue(,

components:,

'v-b':,

}})在控制台中修改app.view的值便可看到過渡效果。

以上示例中的過渡動畫，都可以自己定義，也可以使用上一節提到的自定義class已經鉤子函式等，在這裡就不做詳細介紹了。

本文標題: vue學習筆記高階篇之多元素及多元件過渡

本文位址:

Vue學習筆記 高階篇

乙個簡單的元件 button counter button counter div body 定義乙個名為 button counter 的新元件 vue.component button counter 如果不用return寫 count 0 則各個部件間會互相影響！template you cl...

Vue 學習筆記 路由篇

官網 安裝外掛程式 npm install vue router安裝完之後在package.json裡面檢視版本 1 首先新建要跳轉的vue檔案 在src component裡面新建乙個about.vue檔案 template div class container p this is about ...

ts 學習筆記 高階篇 1

目錄列舉 型別別名用來給乙個型別起個新名字 type name string type nameresolver string type nameorresolver name nameresolver function getname n nameorresolver name else 上例中，...