Vue.js新手问题：方法内控制Div显示/隐藏仅显示不隐藏

嘿，作为从jQuery转Vue的过来人，太懂你这种刚上手时踩坑的感觉了！你遇到的“能显示但不能隐藏”问题，大概率是还没完全跳出jQuery直接操作DOM的思维，或者响应式状态的处理没到位。咱们一步步来解决：

首先，别再直接操作DOM了！ #

Vue的核心是数据驱动视图，和jQuery手动改DOM的思路完全不同。如果你的方法里还在写$('.admin').show()/hide()，那很可能会和Vue的响应式更新冲突——Vue会在数据变化时重新渲染视图，覆盖你手动修改的DOM状态，导致隐藏失效。

正确的做法是用Vue的v-show或v-if指令，绑定一个响应式变量来控制显示：

<!-- 模板里这样写 -->
<div v-show="isAdminDivVisible" class="admin">
  <!-- 你的admin内容 -->
</div>

第二步：用响应式状态管理登录判断 #

admin div需要两个用户都登录才显示，那你得把两个用户的登录状态存在Vue的data里，确保它们是响应式的。然后通过监听状态变化或者计算属性来更新显示变量：

new Vue({
  el: '#app',
  data() {
    return {
      // 两个用户的登录状态，初始为未登录
      user1LoggedIn: false,
      user2LoggedIn: false,
      // 控制admin div显示的变量
      isAdminDivVisible: false
    }
  },
  // 监听登录状态变化，自动更新显示
  watch: {
    user1LoggedIn() {
      this.checkAdminStatus();
    },
    user2LoggedIn() {
      this.checkAdminStatus();
    }
  },
  methods: {
    // 核心判断逻辑：只有两个都登录才显示
    checkAdminStatus() {
      this.isAdminDivVisible = this.user1LoggedIn && this.user2LoggedIn;
    },
    // 假设这是你更新用户登录状态的方法
    setUserLogin(user, status) {
      if (user === 'user1') {
        this.user1LoggedIn = status;
      } else if (user === 'user2') {
        this.user2LoggedIn = status;
      }
    }
  },
  // 页面加载时先检查一次状态
  mounted() {
    this.checkAdminStatus();
  }
});

为什么你的原方法会失效？ #

• 如果你是直接操作DOM：Vue的虚拟DOM会在数据更新时重新渲染，把你手动修改的display属性改回去，导致隐藏操作无效。
• 如果你的登录状态不是响应式的：比如存在普通变量里，Vue检测不到变化，也就不会更新isAdminDivVisible的值，自然不会隐藏div。

额外小提示 #

如果你的登录状态是从外部（比如后端接口、localStorage）获取的，记得在Vue实例初始化时把这些值同步到data里，确保状态是响应式的。

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