谷秋精品课程网站建设软件搜索引擎入口google

学习笔记02-iview组件使用

一、iview 2-Tabs使用

官方地址：https://www.iviewui.com/view-ui-plus/component/navigation/tabs

点击tabs页面可以获取当前页面的name信息，并且可以点击后再获取当前页面数据，减少数据冗余

<template><div><Tabs :value="tabPage" type="card" @on-click="tabChange"><TabPane label="Overview" name="1">标签一的内容</TabPane><TabPane label="Server" name="2">标签二的内容</TabPane><TabPane label="Container" name="3">标签三的内容</TabPane><TabPane label="Website" name="4">标签三的内容</TabPane><TabPane label="Clound Product" name="5">标签三的内容</TabPane></Tabs></div>
</template><script>
export default {name: "example",data() {return {tabPage: '1',}},methods: {init() {},tabChange(name) {this.tabPage = nameif (this.tabPage == 1) {} else if (this.tabPage == 2) {} else if (this.tabPage == 3) {} else if (this.tabPage == 4) {} else if (this.tabPage == 5) {}},},mounted() {this.init()}
}
</script><style scoped></style>