38. Vue组件切换 使用v-if、v-else结合flag进行切换
38. Vue组件切换 使用v-if、v-else结合flag进行切换
Devops海洋的渔夫
发布于 2020-06-23 16:45:16
发布于 2020-06-23 16:45:16
需求
在登陆页面的需求中，一般都会有登陆、注册两个按钮，然后点击不同的按钮显示不同的页面。在这里对应的页面可以是一个组件。
那么通过点击不同的按钮，切换不同的组件页面。
下面使用v-if、v-else结合flag来实现这个页面的切换需求。
示例
1.首先创建两个全局组件，作为切换的页面
image-20200207152410264
2.设置切换按钮，以及应用两个组件
image-20200207152448744
3.给不同的按钮设置click改变flag的值，通过v-if和v-false结合flag来进行组件切换
image-20200207152617838
4.查看浏览器显示
image-20200207152642423
image-20200207152655264
点击登陆或者注册，切换不同的组件。
那么看到这里，应该就会带来一个疑问，就是v-if和v-else之间是不是就是靠flag作为组合联系的呢。
如果在现在的基础上，在写一个组件3、组件4，用另一个flag2来控制新的切换，是否可以的？
5.编写新的组件3、组件4以及定义flag2参数
image-20200207153140841
6.给组件3、组件4设置按钮进行切换
image-20200207153600478
7.确认两台组件之间是否会相互影响
image-20200207155337221
完整示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入vue.js库 -->
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app1">
<a href="" @click.prevent="flag=true">登陆</a>
<a href="" @click.prevent="flag=false">注册</a>
<!-- 登陆组件 -->
<login v-if="flag"></login>
<!-- 注册组件 -->
<register v-else="flag"></register>
<hr>
<a href="" @click.prevent="flag2=true">组件3</a>
<a href="" @click.prevent="flag2=false">组件4</a>
<!-- 组件3 -->
<my-com3 v-if="flag2"></my-com3>
<!-- 组件4 -->
<my-com4 v-else="flag2"></my-com4>
</div>
<script>
// 创建登陆组件
Vue.component('login',{
template:'<h1>登陆组件</h1>'
})
// 创建注册组件
Vue.component('register',{
template:'<h1>注册组件</h1>'
})
// 创建组件3
Vue.component('my-com3',{
template:'<h1>组件3</h1>'
})
// 创建组件4
Vue.component('my-com4',{
template:'<h1>组件4</h1>'
})
// 创建第一个Vue的实例
var vm1 = new Vue({
el: '#app1',
data: {
flag: true,
flag2: true,
},
})
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录