vue_sam_price

by maya tominaga

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css">
<div id="app">
  <table class='table table-bordered' style='table-layout:fixed;width:95%;margin:2px 20px 20px'>
    <thread>
      <th style="width:100px;">品目</th>
      <th style="width:50px;">価格</th>
      <th style="width:50px;">数量</th>
    </thread>
    <tbody>
      <tr>
        <td>Amazon Echo</td>
        <td>{{ a }}</td>
        <td>
          <input class='form-control' type='number' v-model='b'>
        </td>
      </tr>
      <tr>
        <td>Google Home</td>
        <td>{{ c }}</td>
        <td>
          <input class='form-control' type='number' v-model='d'>
        </td>
      </tr>
    </tbody>
  </table>
  <div class='text-right'>
    <p> 小計¥ {{ sum }}&emsp;&emsp;&emsp;</p>
    <p>消費税¥ {{ tax }}&emsp;&emsp;&emsp;</p>
    <p class="text-danger"> 合計¥ {{ sum + tax }}&emsp;&emsp;&emsp;</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    a: 11093,
    b: 1,
    c: 14000,
    d: 1
  },
  computed: {
    sum: function() {
      return this.a * this.b + this.c * this.d
    },
    tax: function() {
      return Math.ceil(this.sum * 0.08)
    }
  },
  watch: {
    b: function(v) {
      if (v < 0) {
        this.b = 0
      }
    },
    d: function(v) {
      if (v < 0) {
        this.d = 0
      }
    },
  },
})