Question

我是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，因此它显示了最后输入的上下文。有想法吗？

Answer 1

您的v-else-if条件不正确-而不是

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

应该是

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

除零外，任何数值在Javascript中都将被视为“ true”。因此，您的渲染逻辑始终围绕“ v-if”和“ v-else-if”，永远不会达到“ v-else”

提示：v-else不能完全显示上下文

1 个答案: