v-if，v-else，v-if-else,v-show 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if，v-else，v-show，</title>
</head>
<body>
<div id="app">
  <!--当isShow为false时，v-if标签内的内容都会消失，而v-show中的内容是隐藏，即是 display：none-->
  <!-- 当频繁切换时，用v-show-->
  <h2 v-if = 'isShow'>v-if {{message}}</h2>
  <h2 v-show = 'isShow'>v-show {{message}}</h2>
  <h2 v-else>isShow为false时显示</h2>
  <!-- 判断不复杂的时候可以在这样写-->
  <h2 v-if="score > 90">优秀</h2>
  <h2 v-else-if="score > 80">良好</h2>
  <h2 v-else-if="score > 60">及格</h2>
  <h2 v-else>不及格</h2>
  <!-- 判断复杂的时候，用计算属性写-->
  <h2>{{result}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      isShow: true,
      score: 110,
    },
    computed: {
      result(){
        let showMessage = ''
        if(this.score < 0 ||  this.score > 100){
          showMessage = '输入成绩不在正常范围内'
        }else if(this.score > 90){
          showMessage = '优秀'
        }else if(this.score  > 80){
          showMessage = '良好'
        }else if(this.score > 60){
          showMessage = '及格'
        }else {
          showMessage = '不及格'
        }
        return showMessage

      },

    },
    methods: {
      sub: function () {

      }
    }
  })
</script>
</body>
</html>

 

posted @ 2020-08-21 21:42  CHUNYIN  阅读(166)  评论(0)    收藏  举报