<body>
<div id="app">
<a href="#" v-on:click.prevent="name='login'">登录</a>
<a href="#" v-on:click.prevent="name='register'">注册</a>
<!-- component是vue提供的一个占位符,根据name来判断里面要显示的内容 -->
<component v-bind:is="name"></component>
</div>
<script src="lib/vue.js"></script>
<script>
Vue.component('register', {
template: '<h1>注册页面</h1>'
})
Vue.component('login', {
template: '<h1>登录页面</h1>'
})
var app = new Vue({
el: '#app',
data: {
name: 'register'
}
})
</script>
</body>
组件切换动画
<!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, .v-leave-to {
opacity: 0;
transform: translateX(150px)
}
.v-enter-active, .v-leave-active {
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="app">
<a href="#" v-on:click.prevent="name='login'">登录</a>
<a href="#" v-on:click.prevent="name='register'">注册</a>
<!-- component是vue提供的一个占位符,根据name来判断里面要显示的内容 -->
<!-- mode 动画的模式,先出后进 -->
<transition mode="out-in">
<component v-bind:is="name"></component>
</transition>
</div>
<script src="lib/vue.js"></script>
<script>
Vue.component('register', {
template: '<h1>注册页面</h1>'
})
Vue.component('login', {
template: '<h1>登录页面</h1>'
})
var app = new Vue({
el: '#app',
data: {
name: 'register'
}
})
</script>
</body>
</html>