vue 用户只能看见自己的信息
时间: 2023-08-17 17:32:33 浏览: 134
如果你想在Vue中实现用户只能看见自己的信息,可以在组件中通过computed属性来计算需要展示的数据,只返回当前用户的信息。例如,假设你有一个用户列表组件,它接收一个名为"users"的prop,表示所有的用户信息。你可以在组件中定义一个computed属性,只返回当前用户的信息,代码如下:
```
<template>
<ul>
<li v-for="user in currentUser" :key="user.id">
{{ user.name }}
</li>
</ul>
</template>
<script>
export default {
props: {
users: {
type: Array,
required: true
}
},
computed: {
currentUser() {
return this.users.filter(user => user.id === this.currentUserId)
},
currentUserId() {
// 根据当前登录的用户信息获取当前用户的ID
// 这里假设当前登录的用户信息存储在sessionStorage中
const user = JSON.parse(sessionStorage.getItem("user"))
return user.id
}
}
}
</script>
```
在上面的代码中,我们定义了一个computed属性"currentUser",它通过filter方法从"users"数组中筛选出当前用户的信息,"currentUserId"是一个计算属性,返回当前登录用户的ID。在模板中,我们只需要循环渲染"currentUser"数组即可,这样就保证了用户只能看到自己的信息。