vue指令 v-if,v-else,else

功能
模板中的选择结构.

格式 于js中的if选择结构是一致的.

<标签 v-if="条件">        </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else>             </标签>

示例

根据分数显示其中的某一个.
     <p>优秀</p> 
     <p>一般</p> 
     <p>不及格</p>
     <script>
   </script>
   <template>
     <h2>学习v-if-elseif-else</h2>
     <p v-if="num >= 80">优秀</p> 
     <p v-else-if="num >= 60">一般</p> 
     <p v-else>不及格</p>
   </template>
   <script>
      export default {
        data () {
          return {
            num: 59 // 分数
          }
          
        }
      }
   </script>

v-else必须要和v-if匹配使用,v-else不能单独使用.只有v-if的值为false时.v-else模块