时间戳

首页 > 解决方案 > vue: v-else 没有完全显示上下文

vue.js - vue: v-else 没有完全显示上下文

问题描述

我是 Vue 的新手。当我使用 v-if、v-else-if 和 v-else 时，前两个标签效果很好。但对于 v-else，它只会改变 {{}} 中的上下文。

html:

<div id="app">
<div v-if="isIf === 1">
  isIf is 1：{{isIf}}
</div>
<div v-else-if="2">
  isIf is 2：{{isIf}}
</div>
<div v-else>
  isIf is not 1 or 2：{{isIf}}
</div>
</div>

js：

  <script>
 var app = new Vue({
  el: '#app',
  data: {
    isIf: 1,
    isShow: false
  }
});
</script>

当我在控制台中更改 app.isIf=3 时，它显示 isIf 为 2：3。我最后一次尝试是 app.isIf=2，所以它显示了最后输入的上下文。任何的想法？

标签： vue.js

解决方案

你的v-else-if情况是错误的 - 而不是

<div v-else-if="2">

它应该是

<div v-else-if="isIf === 2">

除零外，任何数值在 Javascript 中都将被视为“真”。所以你的渲染逻辑总是围绕“v-if”和“v-else-if”，它永远不会达到“v-else”

推荐阅读