Vue.js v-if 逻辑条件问题

Question

我无法理解 v-if 工作原理背后的逻辑。我试图根据用户所在的页面或他们是否经过身份验证来隐藏导航中的按钮。我基本上希望我的帐户按钮在用户登录时显示，如果用户在“激活我的帐户”页面上，则当它们不是 PLUS 时显示 sign-up/log-in 按钮我不希望导航中的任何按钮. 如您所见，我尝试添加一个方法，该方法 returns 激活页面的路径。问题是当以下代码取消注释时，它隐藏了 sign-up/login 按钮，但也隐藏了我的帐户页面。

        <template v-else-if="isNotInConfig">
          </template>

这是我目前的情况：

            <div class="navbar-end">
                <div class="navbar-item">
                    <div class="buttons">
                        <template v-if="$store.state.user.isAuthenticated">
                            <router-link to="/dashboard/my-account" class="button is-primary is-outlined">My account</router-link>
                        </template>
                        <!-- <template v-else-if="isNotInConfig">
                        </template> --> 
                        <template v-else>
                            <router-link to="/sign-up" class="button is-primary" ><strong>Sign up</strong></router-link>
                            <router-link to="/log-in" class="button is-light">Log in</router-link>
                        </template>

                    </div>
                </div>
            </div>

<script>
export default {
    data() {
        return {
        }
    },
  methods: {
    isNotInConfig() {
      return this.$router.history.current["path"] == "/activate/:uid/:token";
    }
  },
};
</script>

Answer 1

v-if / v-else-if / v-else 的逻辑与任何编程语言完全一样。首先，它评估 if 语句，如果条件不为真，则继续执行 else if，依此类推。

在您的情况下，如果 isAuthenticated 为真，它将始终呈现“我的帐户”。如果 isAuthenticated 不成立，它将评估 isNotInConfig 条件并最终评估 v-else.

请注意，html 标签在模板中的顺序和嵌套非常重要！因此，您在 v-if 和 v-else 之间的评论将打破顺序，并且永远不会评估您的 v-else，因此始终呈现内容。

Answer 2

你可以这样做：

  <template v-if="isNotInConfig()">
    <template v-if="$store.state.user.isAuthenticated">
      <router-link to="/dashboard/my-account" class="button is-primary is-outlined">My account</router-link>
    </template>
    <template v-else>
      <router-link to="/sign-up" class="button is-primary" ><strong>Sign up</strong></router-link>
      <router-link to="/log-in" class="button is-light">Log in</router-link>
    </template>
  </template>

然后

isNotInConfig() {
  return !this.$route['path'].includes("/activate");
}

通过将两个按钮都放在 <template v-if="isNotInConfig()"> 中，您只显示其中一个不在“激活我的帐户”页面中的按钮。

不要忘记使用严格相等运算符 (===) 而不是 (==)，因为它添加了类型转换。

您可以阅读更多相关信息 here。

Vue.js v-if 逻辑条件问题

Vue.js v-if logical condition issue

javascript

methods

logical-operators

vue.js

vuejs3