<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<script src="js/vue-2.4.0.js"></script>
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.6s ease;
}
</style>
</head>
<body>
<div id="app">
<!--组件切换方式1：v-if v-else-->
<!--<a href="#" @click.prevent="flag=true">登录</a>-->
<!--<a href="#" @click.prevent="flag=false">注册</a>-->
<!--<count v-if="flag"></count>-->
<!--<login v-else="flag"></login>-->
<!--组件切换方式2：component -->
<!--<a href="#" @click.prevent="comName='count'">登录</a>-->
<!--<a href="#" @click.prevent="comName='login'">注册</a>-->
<!-- Vue 提供了component ，来展示对应名称的组件 -->
<!-- component 是个占位符，:is 属性 可以用来指定要展示的组件的名称 -->
<!--<component :is="comName"></component>-->
<!--3：组件切换- 切换动画-->
<a href="#" @click.prevent="comName='count'">登录</a>
<a href="#" @click.prevent="comName='login'">注册</a>
<!--通过 mode 属性，设置组件切换时候的模式-->
<transition mode="out-in">
<component :is="comName"></component>
</transition>
<!--
总结：当前 Vue 提供的标签
component , template , transition , transitionGroup
-->
</div>
<script>
Vue.component('count',{
template:'<h3>登录组件</h3>'
});
Vue.component('login',{
template:'<h3>注册组件</h3>'
});
const vm=new Vue({
el:'#app',
data:{
// flag:true,
comName:'count' //当前的 component 中的 :is 绑定的组件名称
},
methods:{}
})
</script>
</body>
</html>
3835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
