条件渲染在 vuejs v-if 中不起作用答案

【问题标题】：conditional rendering is not working in vuejs v-if条件渲染在 vuejs v-if 中不起作用
【发布时间】：2020-11-15 19:02:47
【问题描述】：

我有一个 span 标签，它在 vuejs 中使用 v-if 有条件地呈现。如果用户为空，那么它应该不被渲染，如果用户不为空，那么只有它应该被渲染。现在当用户登录时，它正在显示，直到这里它的工作，但是当用户点击注销时，它不应该呈现但仍然是它的呈现

下面是我的代码sn-p

    <span class="user-options" id="user-opt" v-if="user">
      <ul class="user-details">
        <li style="background: #000000; color: white; text-align: center; line-height: 30px;">
          Welcome&nbsp;{{ user.username }}
        </li>
        <li style="text-align: center; background: white; color: black; line-height: 30px;">
          email&nbsp;{{ user.username }}
        </li>
        <li style="background: white; color: black; line-height: 30px;" v-if="user.verified">
          verified
          <span style="float: right; color: blue;">
            <i class="fas fa-check-circle"></i>
          </span>
        </li>
        <li style="line-height: 30px;" v-if="user.verified">
          total post
          <span style="float: right">
            {{ user.totalPost }}
          </span>
        </li>
        <li style="text-align: center; line-height: 30px;" v-on:click="logOut">
          logout
        </li>
      </ul>
</span>

当用户单击注销时，它仍然显示，直到我刷新页面它呈现一些跨度标记的内容

【问题讨论】：

您能否在您的网络浏览器中使用 VueJS 开发工具来检查 user 的值是什么并在问题中显示出来。它就像user 不为空
user 是包含用户名、电子邮件、已验证、totalpost 等属性的对象
你可以添加你的代码执行注销吗？
感谢您的回复，我找到并修复了它

标签： vue.js conditional-rendering

【解决方案1】：

问题是 v-if="user"

<span class="user-options" id="user-opt" v-if="user ">

我用这段代码代替了上面的代码，一切都解决了

  <span class="user-options" id="user-opt" v-if="user != null">

【讨论】：