1、目标：
实现切换tab菜单，激活状态，按钮高亮，显示对应的菜单内容
2、实现
<template><div class="tan_menu"><ul class="container"><liclass="item"v-for="item in tab_menu":key="item.type":class="{ active: current_menu === item.type }"@click="selectMenu(item.type)">{{ item.label }}</li><!-- <li class="item" :class="{ actice: current_menu === 'login' }">登录</li><li class="item" :class="{ actice: current_menu === 'register' }">注册</li> --></ul><template v-if="current_menu === 'login'"><div class="login">这是--登录--内容</div></template><template v-if="current_menu === 'register'"><div class="register">这是--注册--内容</div></template></div>
</template><script>
export default {name: "TabMenu",data() {return {tab_menu: [{ type: "login", label: "登录" },{ type: "register", label: "注册" },],current_menu: "login",};},methods: {selectMenu(type) {this.current_menu = type;},},
};
</script><style lang="less" scoped>
// 清除内外边距
* {margin: 0;padding: 0;
}
.tan_menu {// margin: 20px 20px 0;.container {list-style: none;margin: 100px auto;width: 200px;height: 40px;line-height: 40px;text-align: center;display: flex;justify-content: space-around;background-color: skyblue;.item {width: 100px;cursor: pointer;&.active {background-color: pink;color: #fff;}}}.login,.register {width: 300px;height: 100px;line-height: 100px;text-align: center;border: 2px solid pink;margin: 20px auto;}
}
</style>
效果：
