1、目标:
实现切换tab菜单,激活状态,按钮高亮,显示对应的菜单内容
2、实现
javascript
<template>
<div class="tan_menu">
<ul class="container">
<li
class="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>
效果: