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的用法。
好了本节课就到这里,怎么样,是不是感觉很简单???