這篇文章帶給大家的內容是關於Vue實現元件切換的兩種方式介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
Vue 的元件切換的幾種方式
方式一： v-if 和v-else 結合使用實作切換##
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<script rel="script" src="js/vue-2.4.0.js"></script></head><body>
<div id="app">
<a href="" @click.prevent="flag=true">登陆</a>
<a href="" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div><script>
*<!--定义登录组件-->*
Vue.component('login',{
template :'<h3>登陆组件</h3>'
});
*<!--定义注册组件-->*
Vue.component('register',{
template :'<h3>注册组件</h3>'
});
*<!--创建Vue实例-->*
var vm = new Vue({
el : '#app',
data :{
flag : true,
},
methods:{},
});</script></body></html>點選登入或註冊進入對應的元件模組
：注意： 使用v-if 和v-else 實作切換，只能在兩個元件間相互切換，無法實作多個元件的切換
方式二： 使用Vue提供的component元素實作元件切換
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<script rel="script" src="js/vue-2.4.0.js"></script></head><body>
<div id="app2">
<!-- 链接修改comName的值-->
<a href="" @click.prevent="comName = 'login' ">登陆2</a>
<a href="" @click.prevent="comName = 'register' ">注册2</a>
<!--
component 是一个占位符， :is 属性，可以用来指定要展示的组件的名称
-->
<component :is=" comName "></component>
</div><script>
//组件名称是 字符串
Vue.component('login',{
template :'<h3>登陆组件</h3>'
})
Vue.component('register',{
template :'<h3>注册组件</h3>'
}) //实例
var vm2 = new Vue({
el : '#app2',
data :{
comName : 'login',//当前 component 中的 :is 帮i的那个的组件的名称
},
methods:{},
});</script></body></html>元件名稱要對應
以上是Vue實作元件切換的兩種方式介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
