Vue

by puuga

HTML

<div id="app">
  <div>
    <input type="number" max="100" min="0" step="1" v-model="form.score">
    <button @click="calGrade()">
      Cal
    </button>
  </div>
  
  <div>
    <div v-if="form.score >= 80">A</div>
    <div v-else-if="form.score >= 70">B</div>
    <div v-else-if="form.score >= 60">C</div>
    <div v-else-if="form.score >= 50">D</div>
    <div v-else>F</div>
  </div>
  
  <div>
    <h3>Histories</h3>
    <div v-for="(history, index) in histories" :key="`${index}_${history.score}_${history.grade}`">
      {{ index }}. score {{ history.score }} - grade {{ history.grade }}
    </div>
  </div>
  
  
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    form: {
    	score: ''
    },
    histories: []
  },
  methods: {
  	calGrade: function () {
    	score = +this.form.score
      let grade = ''
      if (score >= 80) {
      	grade = 'A'
      } else if (score >= 70) {
        grade = 'B'
      } else if (score >= 60) {
        grade = 'C'
      } else if (score >= 50) {
        grade = 'D'
      } else {
        grade = 'F'
      }
    	this.histories.push({score:score , grade: grade})
    	this.form.score = ''
    },
    resetGrade: function () {
      
    }
  }
})