<div id="app">
  <h1>学科计分器</h1>
  <div v-for="subject in results" class="subject">
    <input v-model="subject.marks" />
    <span>{{ subject.name }}得分: {{ subject.marks }}</span>
  </div>
  <div class="total">学科总分: {{ totalMarks() }}</div>
</div>

@import url(https://fonts.googleapis.com/css?family=Montserrat);

html,body {
  width: 100vw;
  height: 100vh;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: montserrat;
  background: 
		linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}

#app {
  background: white;
	border: 0 none;
	border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
	padding: 20px 30px;
	box-sizing: border-box;
}
h1 {
  text-align: center;
  color: #666;
  margin: 0 0 20px;
}
.subject {
  margin-bottom: 10px;
  padding: 5px;
}

input {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-sizing: border-box;
	font-family: montserrat;
	color: #2C3E50;
	font-size: 13px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
}

.total {
  border-top: 3px double #ccc;
  margin-top: 20px;
  padding-top: 20px;
  text-align: center;
  color: #27AE60;
  font-size: 16px;
  font-weight: bold;
}

let app = new Vue({
  el: '#app',
  data () {
    return {
      results: [
        {
          name: '英语',
          marks: 70
        },
        {
          name: '数学',
          marks: 80
        },
        {
          name: '历史',
          marks: 90
        }
      ]
    }
  },
  methods: {
    totalMarks: function () {
      let total = 0
      let me = this
      for (let i = 0; i < me.results.length; i++) {
        total += parseInt(me.results[i].marks)
      }
      return total
    }
  }
})