《跟热饭一起学习vue吧》Part.11 v-if条件判断

v-if

v-if 指令，大家一看，很明显是vue自创的。是不是还有点印象？没错，我们之前讲过这个v-if了，就是在刚刚学指令的时候用v-if举例，它的作用是决定这个元素标签是否要显示出来。

不过我们当时的判断很简单，就只是：

v-if="true" 或 v-if = "false"

其实，它的值应该是个表达式，这个表达式最终结果为真，就显示，为假就隐藏元素。

所以我们可以写成这样：

v-if="5>3"  那么就会显示元素
v-if="1+2<2"  那么就会隐藏元素

v-else

写过代码的人都知道，有if 那必有 else。这里也一样：有v-if，那就有跟屁虫 v-else。相当于多写一个分支。

比如下面例子：

v-else-if

如果你懂python或其他语言的 if ,elif/else if ,else, 那么对于这个一定不陌生。

没错，v-else-if 就是可以插入到 v-if 和 v-else中间的，提供了更多分支的指令。

上图中，要被判断的变量名叫type，默认值为C

然后dom层 用了 一个 v-if 判断这个type是不是等于A,如果是就显示A。

下面用了俩个v-if-else来判断 是不是等于 B 或 C

最后用v-else来结尾，表示如果上面三条分支都没中，那就走这条分支，显示的元素内容为Not A/B/C

到这，就讲完了 v-if 和 v-else-if 和 v-else的用法。

好了本节课就到这里，怎么样，是不是感觉很简单？？？