多個元素的過渡
我們之后討論多個組件的過渡，對于原生標(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)簽名的元素切換時(shí)，需要通過 key attribute 設(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 attribute 設(shè)置不同的狀態(tài)來代替 v-if 和 v-else喜滨，上面的例子可以重寫為：
<transition>
<button v-bind:key="isEditing">
{{ isEditing ? 'Save' : 'Edit' }}
</button>
</transition>
使用多個 v-if 的多個元素的過渡可以重寫為綁定了動態(tài) property 的單個元素過渡捉捅。例如：
<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'
}
}
}
完整案例：
<template>
<div id="app">
<h1>home</h1>
<!-- 當(dāng)有相同標(biāo)簽名的元素切換時(shí)，需要通過 key attribute 設(shè)置唯一的值來標(biāo)記以讓
Vue 區(qū)分它們虽风，否則 Vue 為了效率只會替換相同標(biāo)簽內(nèi)部的內(nèi)容棒口。即使在技術(shù)上沒有必要，
給在 <transition> 組件中的多個元素設(shè)置 key 是一個更好的實(shí)踐焰情。 -->
<transition>
<table v-if="items.length > 0">
table
</table>
<p v-else>Sorry, no items found.</p>
</transition>
<transition name="fade">
<button v-if="isEditing" key="save">Save</button>
<button v-else key="edit">Edit</button>
</transition>
<transition name="fade">
<button v-bind:key="isEditing">
{{ isEditing ? "Save" : "Edit" }}
</button>
</transition>
<transition name="fade">
<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>
<br />
<transition name="fade">
<button v-bind:key="docState">
{{ buttonMessage }}
</button>
</transition>
<br />
<br />
<button @click="change">改變</button>
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
items: [],
isEditing: true,
docState: "saved",
};
},
mounted() {},
components: {},
computed: {
buttonMessage: function () {
switch (this.docState) {
case "saved":
return "Edit";
case "edited":
return "Save";
case "editing":
return "Cancel";
}
},
},
methods: {
change() {
this.items = [1, 2];
this.isEditing = !this.isEditing;
this.docState = "edited";
},
},
};
</script>
<style scoped>
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(10px);
}
.fade-enter-active,
.fade-leave-active {
opacity: 1;
transition: all 0.2s;
}
</style>
