2.4.3　v-if条件渲染

v-if条件渲染指令包含v-if、v-else-if和v-else三个指令，与JavaScript的条件判断语法相同，唯一不同的是该指令用在HTML标签上并且只有条件生效的指令修饰的标签最终才会被渲染到网页中。

v-if和v-else-if接收一个布尔类型的结果，双引号中需要设置条件。可以直接使用在data选项中声明的属性进行比较判断，多个条件在一起使用时只有其中一个条件判断的结果为true的HTML标签最终会被渲染在网页中，代码如下：

v-if在Vue框架中的实际应用，代码如下：

score的值为67分，属于60～80的区间，所以页面上应该展示“成绩为67分，成绩及格”，如图2-4所示。

图2-4　v-if指令案例

v-if的渲染机制是根据所有条件判断的结果，只有最后条件为true的标签才会被添加到DOM节点中进行渲染，所以虽然原代码中条件编写了四部分，但是最终实际参与渲染的节点只有一个。测试方式是打开浏览器的Web查看器功能，选择Elements部分查看实际网页运行的HTML文档节点。最终HTML文档中只存在<div>成绩及格</div>这个节点，没有生效的条件没有被加入文档中进行渲染，如图2-5所示。

图2-5　Web查看器结果