在某种条件下才显示个人信息:<el-menu-item index="1-1" @click="modify()">修改密码</el-menu-item> <el-menu-item index="1-2" @click="menuHandler('center')">个人信息</el-menu-item>
时间: 2024-02-19 08:00:05 浏览: 139
vue实现个人信息查看和密码修改功能
5星 · 资源好评率100%
要在某种条件下才显示个人信息,可以在对应的 `<el-menu-item>` 元素上使用 `v-if` 指令,根据条件表达式来控制该元素的显示与隐藏。例如,如果需要在用户登录后才显示个人信息,可以使用以下代码:
```html
<el-menu-item index="1-1" @click="modify()">修改密码</el-menu-item>
<el-menu-item v-if="loggedIn" index="1-2" @click="menuHandler('center')">个人信息</el-menu-item>
```
在Vue组件中,需要在 `data` 选项中定义 `loggedIn` 属性,并在登录成功后将其设置为 `true`,例如:
```javascript
export default {
data() {
return {
loggedIn: false
}
},
methods: {
login() {
// 登录成功后将loggedIn设置为true
this.loggedIn = true;
}
// ...其他方法
}
}
```
当 `loggedIn` 为 `true` 时,`<el-menu-item>` 元素才会被渲染出来,否则将不会显示该元素。
阅读全文