vue【v-if 判断案例】

vue中条件判断
①成绩判断 优良差

<template>
  <div class="test-container">
   <h1 v-if="score>=80">优</h1>
   <h1 v-else-if="score>=60">良</h1>
   <h3 v-else>差</h3>
  </div>
</template>

<script>
export default {
  components: {
  },
  data(){
      return {
          score:89,  //动态数据【输入成绩】
      }
  }
};
</script>

运行结果页面展示：

②页面是否显示

<template>
  <div class="test-container">

   <p v-if="visible">sss</p>
   <button @click="visible =!visible">切换显示</button>
  </div>
</template>

<script>

export default {
  components: {
   
  },
  data(){
      return {
      
        visible:true,
      }
  }
};
</script>

展示结果：