Question

我只是开始了解，却遇到了这个令人沮丧的问题。我有这个模板，它以最简单的方式使用v-if和v-else。但是，模板不会加载到页面上。也就是说，无论v-if函数中设置了什么v-else值，都不会显示isLoggedIn和data div。

我一直在寻找解决方案，但没有任何效果。该模板再也不是直接的了，所以我不确定如何进行调试。

有趣的是，该组件被导入到主App.vue中，正如<Login/>在Vue开发人员工具控制台的“组件”选项卡中显示的那样。我不知道为什么条件渲染在页面上不起作用。任何帮助表示赞赏。

<template>
  <div>
    <div v-if="isLoggedIn">  
     <p>Logged in: {{isLoggedIn}}</p>

    </div>

    <div v-else>
      <p>You are not logged in</p>
    <div>
  </div>
</template>



<script>

export default {
  name: "Login",
  data() {
    return { isLoggedIn: true };

  },
  methods: {}
   
};
</script>

这是App.vue文件。同样，它非常简单。我还尝试了完全删除Record组件，但仍然无法正常工作。

<template>
  <div id="app">
    <Login />
    <Record />
  </div>
</template>
<script>
import Login from "./components/Login.vue";
import Record from "./components/Record.vue";
export default { name: "App", components: { Login, Record } };
</script>

Answer 1

您有一个小错字。 div的{{1}}未关闭：

v-else

这阻止<div> <div v-if="isLoggedIn"> <p>Logged in: {{isLoggedIn}}</p> </div> <div v-else> <p>You are not logged in</p> </div> </div>应用条件。

简单的vue模板条件渲染问题

1 个答案: