如何将控制台中后端返回的对象值展示到网页？属性单独显示方法咨询

嗨，作为前端新手遇到这种数据渲染的问题太正常啦，我来帮你一步步理清解决思路～

一、先解决「控制台能看到返回值，但页面不显示」的问题 #

你当前代码里的核心bug是赋值语句写错了！在getUserBalance方法里，你写的res == this.Balance是判断相等的比较运算符，不是赋值操作。Vue的响应式机制要求我们把后端返回的值赋值给data中定义的变量，这样模板才能感知到数据变化并自动更新页面。

修改步骤：

1. 先确认控制台打印的res结构，比如它是不是直接就是balance数值，或者是包含balance属性的对象
2. 把错误的比较语句改成赋值：如果res是数值就写this.Balance = res;，如果res是对象就写this.Balance = res.balance;

二、实现「分别显示balance在左侧、block在右侧」的需求 #

完全可以通过myObj.balance和myObj.block来实现！只需要把后端返回的整个对象存到data的变量里，然后在模板中分别调用对应的属性，再配合简单的CSS布局就能实现左右排列。

修改后的完整代码示例 #

<template>
  <div class="box-card">
    <!-- 用flex布局实现左右分栏 -->
    <div class="info-wrapper">
      <div class="left-section">
        <p class="title-text">余额</p>
        <p class="number-text">{{ userData.balance }}</p>
      </div>
      <div class="right-section">
        <p class="title-text">Block值</p>
        <p class="number-text">{{ userData.block }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: 0,
      currentPage: 1,
      total: 0,
      pageSize: 20,
      userBalance: [],
      // 新增变量存储后端返回的完整对象
      userData: {} 
    }
  },
  mounted() {
    // 优先用路由参数，测试时可临时写死
    this.userId = this.$route.query["user_id"] || 41;
    this.getUserBalance();
    this.getUserIncomeRecord();
    console.log('hello');
  },
  methods: {
    pageChange(val) {
      this.currentPage = val;
    },
    getUserBalance() {
      Core.Api.User.getUserBalance(this.userId).then(res => {
        console.log(res);
        // 把整个返回对象赋值给userData，这样就能直接访问它的所有属性
        this.userData = res;
      })
    }
  }
}
</script>

<style scoped>
.info-wrapper {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
}
.left-section, .right-section {
  text-align: center;
}
.title-text {
  font-size: 14px;
  color: #666;
  margin: 0 0 8px;
}
.number-text {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
  margin: 0;
}
</style>

额外小提示 #

• 要确保后端返回的res对象确实包含balance和block属性，如果控制台打印的结构不一样，记得对应调整属性名
• 可以用可选链操作符避免数据未加载时的报错，比如写成{{ userData?.balance }}，这样在userData为空时不会抛出错误
• Vue的响应式依赖于data中预先声明的变量，所以我们提前定义了userData: {}，这样后续赋值时Vue才能追踪到变化

内容的提问来源于stack exchange，提问作者guymil