點擊對應的標簽,下面切換至對應的模板…
// 說明
<component :is="name"></component>
// 相當于把id為name的組件放到對應的位置
總體代碼如下:
<!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"><script src="../node_modules/vue/dist/vue.js"></script>
</head><body><div id="app"><a href="" @click.prevent="name='login'">登錄</a><a href="" @click.prevent="name='register'">注冊</a><a href="" @click.prevent="name='forget'">忘記密碼</a><component :is="name"></component></div><template id="tmp1"><h3>登錄</h3></template><template id="tmp2"><h3>注冊</h3></template><template id="tmp3"><h3>忘記密碼</h3></template><script>Vue.component('login', {template: '#tmp1'})Vue.component('register', {template: '#tmp2'})Vue.component('forget', {template: '#tmp3'})const vm = new Vue({el: '#app',data: {name: 'login'},methods: {}})</script>
</body></html>// 注意vue.js的導入.
切換效果:
傳送門
// html
<transition mode="out-in"><component v-bind:is="name"></component>
</transition>// 把需要動畫的組件用transition包裹起來
// css
<style>.v-enter,.v-leave-to{opacity: 0,transform: translateX(150px);}.v-enter-active,.v-leave-active {transition: all 0.5s ease;}
</style>
