2019年8月18日

使用v-if和v-else进行组件的切换

<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>'
})
var vm=new Vue({
el:'#app',
data:{
flag:false
},
methods:{}
});
</script>

在需要控制的标签上添加v-if和v-else属性
通过点击按钮将flag置为true或者false，实现组件的切换

使用component切换组件

组件名是字符串

 Vue.component('login',{
template:'<h3>登录组件</h3>'
})
Vue.component('register',{
template:'<h3>注册组件</h3>'
})
var vm=new Vue({
el:'#app',
data:{
comName:'login' //当前component中的 :is绑定的组件的名称
},
methods:{}
});

页面中的代码
Vue提供了component,来展示对应名称的组件
component是一个占位符,:is属性,可以用来指定要展示的组件的名称

<div id="app">
<a href="" @click.prevent="comName='login'">登录组件</a>
<a href="" @click.prevent="comName='register'">注册组件</a>
<component :is="comName"></component>
</div>

相当于点击按钮之后，将comName这个变量的值修改，从而实现组件的切换

在component外用transtion包裹起来，再设置style就可以为切换添加动画

<transition mode="out-in">
<component :is="comName"></component>
</transition>

transition的 mode属性是，当要切换出的组件完全切换出去的时候才允许进入的组件进入

style属性

<style>
.v-enter,
.v-leave-to{
opacity:0;
transform:translateX(150px)
}
.v-enter-active,
.v-leave-activ{
transition:all 0.5s ease;
}
</style>

最后

以上就是怕黑背包为你收集整理的vue中的组件切换使用v-if和v-else进行组件的切换使用component切换组件的全部内容，希望文章能够帮你解决vue中的组件切换使用v-if和v-else进行组件的切换使用component切换组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。