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

2022-05-19 16:45:09 浏览数 (1)

v-if

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

不过我们当时的判断很简单,就只是:

代码语言:javascript复制
v-if="true" 或 v-if = "false"

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

所以我们可以写成这样:

代码语言:javascript复制
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的用法。

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

0 人点赞