v-else-if 在 vuejs 中不起作用：无法解析指令：else-if答案

【问题标题】：v-else-if not working in vuejs : Failed to resolve directive: else-ifv-else-if 在 vuejs 中不起作用：无法解析指令：else-if
【发布时间】：2017-12-21 22:55:31
【问题描述】：

我正在使用“if”和“else-if”，但出现编译错误。

[Vue 警告]：无法解析指令：else-if

这是我的代码

var app = new Vue({
  el:"#app",
  data:{
      lab_status : 2
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script>
<div id="app">
  <span v-if="lab_status==0">Inactive</span>
  <span v-else-if="lab_status==1">Active</span>
  <span v-else>Expired</span>
</div>

请帮我解决这个问题。

【问题讨论】：

标签： javascript vue.js vue-directives

【解决方案1】：

v-else-if是在vue 2.1.0中添加的，但是你使用的是1.0.28版本，这就是错误的原因，更新vue版本或者只使用v-if

<span v-if="lab_status==0">Inactive</span> 
<span v-if="lab_status==1">Active</span> 
<span v-if="lab_status!=1 && lab_status!=0">Expired</span>

见v-else-if

【讨论】：

【解决方案2】：

我认为你对 v-if 和 v-else 的使用有些错误。

请检查您是否同时有一个带有 v-if 和 v-else 的标签。

<span v-else v-if="lab_status==1">Inactive</span>

您可以改用 v-else-if。

【讨论】：

【解决方案3】：

来自this documentv-else-if指令

2.1.0 中的新功能

所以更新你的 vuejs 版本

目前您只能使用v-if 和v-else

<span v-if="lab_status==0">Inactive</span>
<span v-if="lab_status==1">Active</span>
<span v-if="lab_status!=0&&lab_status!=1">Expired</span>

注意：在您的情况下，您只能使用v-if。如果您使用v-else，那么对于lab_status=0，Inactive 和Expired 都会显示。

【讨论】：