vuejs2 - 使用复选框 Vue.js 切换固定金额

Question

我是 Vue.js 的新手，并试图了解复选框的工作原理。我创建了一个带有固定总数的小应用程序。这个总数会根据复选框是选中还是未选中而更新。

如果每一项都被选中，我会将单独的固定金额添加到总数中。取消选中时，固定金额将被删除。我已经让应用程序正常工作，但我想知道我写的内容是否正确，是否有更清洁的解决方案？循环遍历多行时如何工作？

提前致谢

https://codepen.io/mjwals/pen/bGWRYbw

谢谢

编码：

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <div class="row">
      £{{ total }}
      <input type="checkbox" id="1" v-model="chb1" @change="add" />
      <label for="1">{{ chb1 }}</label>

      <input type="checkbox" id="2" v-model="chb2" @change="minus" />
      <label for="2">{{ chb2 }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 30,
      chb1: false,
      chb1Amount: 10,
      chb2: false,
      chb2Amount: 30,
    };
  },
  methods: {
    add() {
      if(this.chb1) {
        return this.total = this.total + this.chb1Amount;
      } else {
        return this.total = this.total - this.chb1Amount;
      }
    },
    minus() {
      if(this.chb2) {
        return this.total = this.total + this.chb2Amount;
      } else {
        return this.total = this.total - this.chb2Amount;
      }
    },
  },
  computed: {
    
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
  .row {
    border: solid 1px #dbdbdb;
    padding: 10px;
  }
</style>

标签： vuejs2