一、通過v-if控制實現
首先我們通過前面介紹的v-if標籤來實現下這種效果
1.創建組件
創建我們需要的兩個全局組件，並通過標籤使用。
<body>
<div id="app">
<a href="" @click.prevent="flag=true">登錄</a>
<a href="" @click.prevent="flag=false">註冊</a>
<!--注意： v-if v-else-if v-else 使用^_^ -->
<login v-if="flag"></login>
<register v-else></register>
</div>
<script>
// 創建登錄的組件
Vue.component("login",{
template: "<h3>這是一個登錄LOGIN組件</h3>"
})
// 創建註冊的組件
Vue.component("register",{
template: "<h3>這是一個註冊組件</h3>"
})
var vm = new Vue({
el: "#app",
data: {
flag: false
},
methods: {}
})
</script>
</body>
二、通過component標籤來實現
除了上面介紹的這種方式以外我們還可以通過Vue組件中給我們提供的一個component標籤來實現
Vue提供了 component 來展示對應名稱的組件，component 是一個佔位符, :is 屬性,可以用來指定要展示的組件的名稱
<body>
<div id="app">
<a href="" @click.prevent="comName='login'">登錄</a>
<a href="" @click.prevent="comName='register'">註冊</a>
<!-- Vue提供了 component ,來展示對應名稱的組件 -->
<!-- component 是一個佔位符, :is 屬性,可以用來指定要展示的組件的名稱 -->
<component :is="comName"></component>
<!-- 總結:當前學習了幾個 Vue 提供的標籤了??? -->
<!-- component, template, transition, transitionGroup -->
</div>
<script>
// 組件名稱是 字符串
Vue.component('login', {
template: '<h3>登錄組件</h3>'
})
Vue.component('register', {
template: '<h3>註冊組件</h3>'
})
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
comName: 'login' // 當前 component 中的 :is 綁定的組件的名稱
},
methods: {}
});
</script>
</body>
效果：
組件切換-添加動畫
效果：（存在bug）
我們發現動畫切換的時候兩個是一塊執行的，這時我們可以在 transition 標籤添加一個 mode屬性 來設置動畫的模式
效果：
