<!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>