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>

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

标签：每道题,vue,form,elementUI,sum,parseFloat,let,总分
来源： https://blog.csdn.net/ju__ju/article/details/97801232