VUE的v-if和v-else的使用

之前练习的一个小练习，vue.js

代码：

<div class="app">
    <!-- v-if后面一般跟的是boolean值 true就显示。false就不显示-->
    <h2 v-if="isShow">
      <div>123</div>
      {{message}}
    </h2>
    <!-- 直接在浏览器把isShow改为false就会显示 -->
    <h3 v-else>当isShow为false时，显示我</h3>

    <!---v-if和v-else和v-else-if的结合使用，刺激判断------------------- -->
   <!--  <h1 v-if="score>=90">优秀</h1> -->
    <!-- 这里不需要写·&&score<90，因为它是elseif，是上面条件不满足时才执行 -->
   <!--  <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=60">及格</h2>
    <h2 v-else>不及格</h2> -->
    <h1>---------------------------------</h1>
    <h2>{{result}}</h2>


  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '.app',
      data: {
        message:'你好',
        isShow: true,
        score:100
      },
      computed: {
        result(){
          let showMessage = '';
          if(this.score >= 90){
            showMessage = '优秀'
          }else if(this.score >=80){
            showMessage = '良好'
          }else if(this.score >=70){
            showMessage = '及格'
          }else{
            showMessage = '再练练，不及格'
          }
          return showMessage

        }
      },
      methods: {
        
      },
    })
  </script>

当我们在浏览器控制台把，把isShow改为false，