vue+elementUI中考试模块计算总分

项目中需要这样的效果

需要计算多种题型加起来的总分,如果没有或者没填完,就按0计算
.

1.样式

<template>
  <div class="room">
    <el-form ref="form" :model="form">
      <el-form-item>
        <ul>
          <li>
            单选题
            <el-input type="text" v-model="form.single" @change="score"></el-input>道
            每道题
            <el-input type="text" v-model="form.singlescore" @change="score"></el-input>分
          </li>
          <li>
            多选题
            <el-input type="text" v-model="form.multiple" @change="score"></el-input>道
            每道题
            <el-input type="text" v-model="form.multiplescore" @change="score"></el-input>分
          </li>
          <li>
            判断题
            <el-input type="text" v-model="form.judge" @change="score"></el-input>道
            每道题
            <el-input type="text" v-model="form.judgescore" @change="score"></el-input>分
          </li>
          <li>
            填空题
            <el-input type="text" v-model="form.blank" @change="score"></el-input>道
            每道题
            <el-input type="text" v-model="form.blankscore" @change="score"></el-input>分
          </li>
          <li>
            问答题
            <el-input type="text" v-model="form.answer" @change="score"></el-input>道
            每道题
            <el-input type="text" v-model="form.answerscore" @change="score"></el-input>分
          </li>
        </ul>
      </el-form-item>
      <el-form-item>
        总分
        <el-input :disabled="true" v-model="allscore"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {}
    };
  },
  computed: {
    allscore: function() {
      let sum = 0;
      let sum1 = parseFloat(this.form.single * this.form.singlescore) || 0;
      let sum2 =
        parseFloat(this.form.multiple * this.form.multiplescore) || 0;
      let sum3 = parseFloat(this.form.judge * this.form.judgescore) || 0;
      let sum4 = parseFloat(this.form.answer * this.form.answerscore) || 0;
      let sum5 = parseFloat(this.form.blank * this.form.blankscore) || 0;
      sum = sum1 + sum2 + sum3 + sum4 + sum5;
      return sum || 0;
    }
  },
  methods: {
    score() {}
  }
};
</script>

这个计算属性写的自己都不知道写的啥,但是效果实现了.将就看吧,有帮助就拿去用.