v-else-如果不在vuejs中工作:无法解析指令:else-if

时间:2017-07-17 11:55:36

标签: javascript vue.js vuejs-directive

我正在使用“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>

请帮我解决这个问题。

3 个答案:

答案 0 :(得分:2)

在pue 2.1.0中添加了

v-else-if,但您使用的是版本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

答案 1 :(得分:1)

来自this document v-else-if指令

  

2.1.0中的新内容

所以更新你的vuejs版本

目前,您只能使用v-ifv-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显示InactiveExpired

答案 2 :(得分:0)

我认为您对v-if和v-else的使用有误。

请检查您是否同时具有v-if和v-else标签。

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

您可以改用v-else-if。