v-else_Vue从入门到实战

如何高效使用Vue.js中的v-else和v-else-if

今天我们再来学两个指令v-else 和 v-else-if,那么这两个指令是用来辅助咱们的v-if来进行判断使用的,就像咱们平时js当中有if,那同样也有else和else if。

那么通常会用到下面这一些场景,比如说判断年纪,判断咱们的成绩。对于这种多条件判断就可以用咱们的else 和 else if。那么语法上v-else表示不需要跟任何的内容,而v-esle再来个if的话,后面就可以写一个判断的表达式了,那么唯一的注意点就是它俩在使用的时候要紧挨着咱们的v-if。

那下面的话我们通过代码,给大家演示一下,那这里的话我们已经准备好了一些基本的结构。

比如说性别,我们需要根据不同的标识判断是男还是女,比如说我们定义一个gender,当gender等于1是显示性别男,当gender等于2时显示性别女。


如果条件再复杂一点啊,比如说这边有四层的一个判断,怎么办写呢?比如说成绩,我们需要根据不同的成绩,写多个判断,最终显示出正确的成绩评定以及对应的奖励。那对于这种情况,咱们多种条件判断呢就比较适合用我们的v-else-if。

那么这边要判断就需要准备一个成绩,咱们设置一个score等于,那分是不是就属于我们这边的等级B,我们在上面写判断的时候可以这么如下图这么写。

代码写完,我们看一下效果,你会看到"奖励周末去出游",是不是相当于在我们的成绩B。

那如果说现在分数就分,在看页面是不是就显示"奖励平板电脑一台",就变成我们的成绩A。

那唯一大家需要注意的一点是什么呢?就这个v-else,它不能够单独使用,就是如果说你要用这个else就需要配合if一起使用,如果说你将上面的v-if删了,页面是不是没有正确的去做一个渲染,其次我们看控制台这边是不是也报错了,所有没有我们v-if是不行啊。

原文链接:,转发请注明来源!