前端vue通过id查信息,后端每次返回字段不一样,前端代码如何每次展示不用的信息
时间: 2024-04-30 13:22:49 浏览: 10
可以使用动态绑定的方式来解决这个问题。前端可以根据后端返回的数据动态展示不同的信息。具体来说,可以使用 v-if 或 v-show 来控制页面中需要展示的信息。根据后端返回的数据,判断需要展示哪些信息,然后动态绑定 v-if 或 v-show 来实现。例如:
```
<template>
<div>
<div v-if="showName">{{ userInfo.name }}</div>
<div v-if="showAge">{{ userInfo.age }}</div>
<div v-if="showEmail">{{ userInfo.email }}</div>
</div>
</template>
<script>
export default {
data() {
return {
userInfo: {},
showName: false,
showAge: false,
showEmail: false
}
},
methods: {
getUserInfo(id) {
// 发送请求获取用户信息
// 假设后端返回的数据为 { name: 'xxx', age: 18 }
this.userInfo = { name: 'xxx', age: 18 }
// 根据后端返回的数据决定需要展示哪些信息
this.showName = this.userInfo.name ? true : false
this.showAge = this.userInfo.age ? true : false
this.showEmail = this.userInfo.email ? true : false
}
}
}
</script>
```
在上面的代码中,根据后端返回的数据,判断需要展示哪些信息,然后动态绑定 v-if 来实现。如果后端返回的数据不包含某些字段,那么这些字段对应的 div 标签就不会被渲染出来。这样就可以实现根据后端返回的数据动态展示不同的信息。