p2p网站建设 深圳,广东手机网站建设品牌,做网站需要什么人才,留言板网页设计代码vue项目中展示的组件#xff0c;我平常都是通过v-show进行展示控制#xff0c;类似这样 通常情况下#xff0c;一个正常展示组件的流程#xff0c;是通过前端用户点击触发函数#xff0c;在函数中对data数据进行操作#xff0c;从而展示不同的页面
showWork: false,
sho… vue项目中展示的组件我平常都是通过v-show进行展示控制类似这样 通常情况下一个正常展示组件的流程是通过前端用户点击触发函数在函数中对data数据进行操作从而展示不同的页面
showWork: false,
showOpusTable: false,
在方法中
goToWork() {console.log(跳转到工作台);this.showOpusTable false;this.showWork true;
}, 一两个变量还好变量多了自然很麻烦于是我采用了更为便捷的方法将这些组件展示变量存储在一个对象中
showComponent: {opusTable: false,work: false,
}, 然后使用computed属性来简化代码
showOpusTable() {return this.showComponent.opusTable;
},
showWork() {return this.showComponent.work;
}, 再遍历showComponent对象的属性来设置它们的值为false这个方法称之为closeAll,借助此方法便捷的控制组件展示变量。
closeAll() {for (const key in this.showComponent) {if (Object.hasOwnProperty.call(this.showComponent, key)) {this.showComponent[key] false;}}
}, 之后再函数中对组件展示就简单的两行代码即可第一行调用closeAll关闭所有组件第二个打开想要展示的组件即可。
gotoIndex() {this.closeAll();this.showComponent.opusTable true;
}, 仅为个人使用方法实际开发中应采用效能更高更符合使用场景的方法欢迎讨论。
