<template> <div> <div class="update-user-container"> <div class="header"> <div class="tab"> <div v-for="(item, index) in options" :key="item.id" class="tab-item" :class="tabIndex === index ? 'tab-active' : ''" @click="radioChange(item.value, index)" > {{ item.name }} </div> </div> </div> <base-info v-if="tabIndex === 0" /> <password v-if="tabIndex === 1" /> </div> </div> </template> <script> import baseInfo from '../updateUser/components/baseInfo.vue'; import Password from '../updateUser/components/password.vue'; export default { components: { baseInfo, Password }, data() { return { options: [{ name: '修改基本信息', value: 1 }, { name: '修改密码', value: 2 }], tabIndex: 0 } }, methods: { radioChange(val, index) { this.tabIndex = index; } } } </script> <style lang="scss" scoped> .header { display: flex; justify-content: center; margin-bottom: 30px; .tab { display: flex; cursor: pointer; .tab-item { margin: 0 50px; padding-bottom: 10px; } .tab-active { color: #038ed7; border-bottom: 1px solid #038ed7; } } } </style>