vue中监听input的输入值

最新推荐文章于 2024-11-05 10:16:01 发布

原创最新推荐文章于 2024-11-05 10:16:01 发布 · 4.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#大数据

收录于

本文介绍了一种在前端表单中实现分数实时计算的方法。通过监听输入框的变化，使用JavaScript进行数组遍历并累加实际扣分值，进而更新总分。此方案适用于需要动态反馈分数变化的应用场景。

<el-form-item label="实际扣分:" style="color: red" >
              <el-input v-model="item.deductPoints" placeholder="请输入分数" v-on:input="search" />
            </el-form-item>

监听方法需要使用v-on:input="“方法名”

    search(e){
      var count = 0;
      for (var i = 0; i < this.ScoreInfo.length; i++) {
        //  这里将数组中的字符串转换为数字，乘以1就可以
        count = count + this.ScoreInfo[i].deductPoints * 1
      }
      this.form.fraction = count;
    },