vue基础课程学习之条件渲染（八）

# v-if

       v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候才能被渲染。当然也可以用v-else 添加一个“else 块”

点击“测试if else”按钮，会循环切换不同内容。

#在<template>元素上使用v-if 条件渲染分组

       因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个<template>元素当做不可见的包裹元素，并且在上面使用v-if。最终的渲染结果将不包含<template>元素。

注意：从上述两张图片（方框）中可以看出，在使用<template>元素时，最终的渲染不包含<template>元素，布局可以少一层渲染。而用其他元素也能达到UI效果，但是在渲染的时候会将该元素渲染出来，会多一个层级的渲染。

# v-else-if

       如果判断的条件有许多个，再之前的v-if与v-else组合使用就显的有些繁杂了，故而可以使用v-else-if指令来连续使用条件