组件的切换方式
1.使用flag=true/false控制
<div id="app">
<div>
<input type="button" value="登录" @click="flag=true">
<input type="button" value="注册" @click="flag=false">
</div>
<login v-if="flag"></login>
<register v-else></register>
</div>
<template id="login">
<h3>登陆模块</h3>
</template>
<template id="register">
<h3>注册模块</h3>
</template>
<script>
Vue.component("login", {
template: "#login"
});
Vue.component("register", {
template:"#register"
});
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {
}
});
</script>
2.使用 is 属性控制
<div id="app">
<div>
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
</div>
<!-- component 是一个占位符,:is 属性,可以用来指定展示的组件 -->
<component :is="comName"></component>
<!-- 总结:当前学习的几个 Vue 提供的标签??? -->
<!-- component, template, transition, transitionGroup -->
</div>
<template id="login">
<h3>登陆模块</h3>
</template>
<template id="register">
<h3>注册模块</h3>
</template>
<script>
Vue.component("login", {
template: "#login"
});
Vue.component("register", {
template:"#register"
});
var vm = new Vue({
el: '#app',
data: {
comName: "login" //当前 component 中的 :is 绑定的组件名称
},
methods: {
}
});
</script>
3.组件切换动画
<style>
.v-eter, .v-leave-to {
opacity: 0;
transform: translateX(150px);
}
.v-enter-active, .v-leave-active {
transition: all 0.8s ease;
}
</style>
<div id="app">
<div>
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
</div>
<!-- 通过 mode 属性,设置组件切换方式 -->
<transition mode="out-in">
<component :is="comName"></component>
</transition>
</div>
<template id="login">
<h3>登陆模块</h3>
</template>
<template id="register">
<h3>注册模块</h3>
</template>
<script>
Vue.component("login", {
template: "#login"
});
Vue.component("register", {
template:"#register"
});
var vm = new Vue({
el: '#app',
data: {
comName: "login" //当前 component 中的 :is 绑定的组件名称
},
methods: {
}
});
</script>