<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.v-enter{
opacity: 0;
transform: translateX(100px);
}
.v-leave-to{
/* 離開時候最后到的位置 */
opacity: 0;
transform: translateX(-100px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.4s ease;
position: absolute;
}
</style>
</head>
<body>
<!-- 創建控制的區域 -->
<div id="app">
<!-- 通過component的 :is屬性，可以顯示指定名稱的組件 -->
<a href="#" @click.prevent="comname='com1'">顯示組件1</a> |
<a href="#" @click.prevent="comname='com2'">顯示組件2</a> |
<a href="#" @click.prevent="comname='com3'">顯示組件3</a> |
<a href="#" @click.prevent="comname='com4'">顯示組件4</a> |
<!-- <transition mode="out-in"> 先離開后進入-->
<transition>
<component :is="comname"></component>
</transition>
</div>
<template id="com1">
<div>
<h3>奔波霸</h3>
</div>
</template>
<template id="com2">
<div>
<h3>霸波奔</h3>
</div>
</template>
<template id="com3">
<div>
<h3>孫行者</h3>
</div>
</template>
<template id="com4">
<div>
<h3>行者孫</h3>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.component("com1", {
template: "#com1",
})
Vue.component("com2", {
template: "#com2",
})
Vue.component("com3", {
template: "#com3",
})
Vue.component("com4", {
template: "#com4",
})
let vm = new Vue({
el: "#app",
data: {
comname:"com1"
},
methods: {
getList() {
}
},
})
</script>
</body>
</html>