在Vue进行前端开发中,条件判断主要用于根据不同的条件来决定显示或隐藏,或者进行视图之间的切换,本文以一个简单的小例子简述v-if的常见用法,仅供学习分享使用,如有不足之处,还请指正。
v-if 指令
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 可以用 v-else 添加一个“else 块”,也可以不用。v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。
如下所示:如果isgood为true,则显示【Vue is good!】否则显示【Oh no】。
1 Vue is good!
2 Oh no 😢
在 元素上使用 v-if 条件渲染分组
因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个 元素当做不可见的包裹元素,并在上面使用 v-if。最终的渲染结果将不包含 元素。如下所示:
1
2
Title
3
Paragraph 1
4
Paragraph 2
5
v-else-if 指令
v-else-if,顾名思义,充当 v-if 的“else-if 块”,可以连续使用,如下所示:
1 A