38. Vue组件切换 使用v |
您所在的位置:网站首页 › vue点击切换显示隐藏 › 38. Vue组件切换 使用v |
需求 在登陆页面的需求中,一般都会有登陆、注册两个按钮,然后点击不同的按钮显示不同的页面。在这里对应的页面可以是一个组件。 那么通过点击不同的按钮,切换不同的组件页面。 下面使用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 完整示例代码 Title 登陆 注册 组件3 组件4 // 创建登陆组件 Vue.component('login',{ template:'登陆组件' }) // 创建注册组件 Vue.component('register',{ template:'注册组件' }) // 创建组件3 Vue.component('my-com3',{ template:'组件3' }) // 创建组件4 Vue.component('my-com4',{ template:'组件4' }) // 创建第一个Vue的实例 var vm1 = new Vue({ el: '#app1', data: { flag: true, flag2: true, }, }) |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |