条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

• v-show
  • 作用： 控制元素显示隐藏
  • 语法： v-show = “表达式” 表达式值为 true 显示， false 隐藏
  • 原理： 切换 display:none 控制显示隐藏
  • 场景：频繁切换显示隐藏的场景
• v-if
  • 作用： 控制元素显示隐藏（条件渲染）
  • 语法： v-if= “表达式” 表达式值 true显示， false 隐藏
  • 原理： 基于条件判断，是否创建 或 移除元素节点
  • 场景： 要么显示，要么隐藏，不频繁切换的场景

  <!-- 
    v-show底层原理：切换 css 的 display: none 来控制显示隐藏
    v-if  底层原理：根据 判断条件 控制元素的 创建 和 移除（条件渲染）
  -->
  <div id="app">
    <div v-show="flag" class="box">我是v-show控制的盒子</div>
    <div v-if="flag" class="box">我是v-if控制的盒子</div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: false
      }
    })

浏览器检查中，v-show的元素节点存在，v-if的元素节点不存在

• v-else 和 v-else-if

  • 作用：辅助v-if进行判断渲染
  • 语法：v-else v-else-if=“表达式”
  • 需要紧接着v-if使用

    <div class="app">
        <p v-if="sc > 90">A</p>
        <p v-else-if="sc > 70">B</p>
        <p v-else-if="sc > 60">C</p>
        <p v-else>D</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
        data:{
            sc:90
        }
      })
    </script>