【条件渲染指令】

一、应用

        帮助开发者控制显示和隐藏（true显示，false隐藏）

例子：

    <p v-if="flag">这是被 v-if 控制的元素</p>

    <p v-show="flag">这是被 v-show 控制的元素</p>

  data: {

        // 如果 flag 为 true，则显示被控制的元素；如果为 false 则隐藏被控制的元素

        flag: false,

        type: 'A'

      }

二、原理

1.v-if原理：动态的移除或者创建元素（实际开发中绝大多数情况直接用v-if，如果刚进入时那个元素不需要被展示，且后期很可能不会被展示，用这个性能更好）

2.v-show原理：动态为元素添加和移除display样式（如果要频繁切换显示状态，用这个性能更好）

三、v-if配套的指令

1.v-else-if：

    <div v-if="type === 'A'">优秀</div>

    <div v-else-if="type === 'B'">良好</div>

    <div v-else-if="type === 'C'">一般</div>

    <div v-else>差</div>