SOURCE

var app = new Vue({
  el: '#app',
  data: {
    goods: [
      {name: '场刊', unit: 2200, trans: 'パンフレット'},
      {name: '文件夹(ftr)', unit: 600, trans: 'クリアファイル（しゅうごう）'},
      {name: '文件夹(K)', unit: 600},
      {name: '文件夹(T)', unit: 600},
      {name: '场限(ftr)', unit: 800, trans:'オリジナルフォトセット（しゅうごう）'},
      {name: '场限(K)', unit: 800},
      {name: '场限(T)', unit: 800},
      {name: '购物袋', unit: 2000, trans: 'ショッピングバッグ'},
      {name: '会报文件夹', unit: 1500, trans: 'かいほうフォルダ'},
      {name: '日记', unit: 1800, trans: 'ダイアリー'},
      {name: '毛毯', unit: 3000, trans: 'ブランケット'},
      {name: '化妆包', unit: 1500, trans: 'ポーチ'}
    ],
    rateInfo: {}
  },
  computed: {
    total() {
      return this.goods.reduce((sum, current) => {
        return sum + ~~current.unit * ~~current.amount;
      }, 0);
    },
    totalAmount() {
      return this.goods.reduce((sum, current) => {
        return sum + ~~current.amount;
      }, 0);
    },
    RMB() {
      let rate = this.rateInfo.rates && this.rateInfo.rates['CNY'] || 0;
      return this.total * rate;
    }
  },
  methods: {
    init() {
      for (let item of this.goods) {
        this.$set(item, 'amount', 0);
      }
    },
    action(base, item) {
      if (~~item.amount + base >= 0)
      	this.$set(item, 'amount', ~~item.amount + base);
    },
    all(base) {
      for (let item of this.goods) {
        this.action(base, item);
      }
    }
  },
  mounted() {
    this.init();
    fetch('https://api.fixer.io/latest?base=JPY')
  	.then((resp) => resp.json()).then(data => {
      this.rateInfo = data;
		});
  }
});

<div id="app">
  <table>
    <thead>
      <tr>
        <td width="30%">Goods</td>
        <td width="45%">Translation</td>
        <td width="10%">Unit Price</td>
        <td>Amount</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in goods">
        <td>{{item.name}}</td>
        <td>{{item.trans}}</td>
        <td>{{item.unit}}</td>
        <td class="flex">
          <button @click="action(-1, item)"> - </button>
          <input type="number" v-model="item.amount">
          <button @click="action(1, item)"> + </button>
        </td>
      </tr>
    </tbody>
  </table>
  <button @click="all(1)">ALL +1</button>
  <button @click="all(-1)">ALL -1</button>
  <button @click="init()">归零</button>
  <p>Total Price: {{total}} </p>
  <p>Total Amount: {{totalAmount}}点 </p>
  <hr />
  <p>Rate Date: {{rateInfo.date}} | Rate: {{rateInfo.rates['CNY']}}</p>
  <p>RMB: {{RMB}} (仅供参考)</p>
</div>

table {
  border: 1px solid #333;
}
table thead td {
  background: #ddd;
}
table td {
  border: 1px solid #333;
}
.flex {
  display: flex;
}
.flex * {
  flex: 1;
}
.flex input {
  width: 30px;
}