VUE学习日记（九） ---- 条件渲染

条件渲染：

v-if

v-else-if

v-else

<div id="myPage">
      <p v-if="num==0">成绩未公布</p>
      <p v-else-if="num<60">分数为{{num}},考试不及格。</p>
      <p v-else-if="num<80">分数为{{num}},还需努力。</p>
      <p v-else>分数为{{num}},考得不错。</p>

      <button @click="btnclick">成绩查询</button>
    </div>    

    <script>
      var myPage = new Vue({
        el:'#myPage',
        data:{
          num:0
        },
        methods:{
          btnclick:function(){
            this.num = Math.round(Math.random()*100);
          }
        }
      })
    </script>

效果图展示：