小銭計算プログラムの写経のメモ

8631 ワード
Vue.js Vue.js テキストリンク
index.html
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<link rel="stylesheet" href="style.css">
<body>
  <div id="app" class="container"> <!--vueの宣言-->
    <div class="row">
      <div class="col-8 offset-2">
        <h1 mt-5 >小銭の計算</h1>
        <div>
          <p>いくら</p>
          <p><input type="number" name="price" v-model=price><button @click="calc()">計算</button></p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-4 offset-2">
        500円 :{{yen500}}
      </div>
      <div class="col-4">
        100円  :{{yen100}}
      </div>
      <div class="col-4 offset-2">
          50円 :{{yen50}}
        </div>
        <div class="col-4">
          10円 : {{yen10}}
        </div> <div class="col-4 offset-2">
            5円 : {{yen5}}
          </div>
          <div class="col-4">
            1円 :{{yen1}}
          </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js">
main.js
var app=new Vue({
  el:'#app',
  data:{
     price:0,　//input要素の指定
      yen500:0,
      yen100:0,
      yen50:0,　//gridの指定
      yen10:0,
      yen1:0,
  },
  methods:{　
    calc:function(event){　　//buttonをクリックしたときの処理を宣言
      change=this.price;　//changeはその関数内でしか適用されない
  this.yen500=Math.floor(change/500);//500でわった切り捨ての値を代入
      change %=500;　その値をchangeに代入
 this.yen100=Math.floor(change/100);//500で割り切れなっかたあまりを
//100で割る
change %100;
      this.yen50=Math.floor(change/50);
      change %=50;
      this.yen10=Math.floor(change/10);
      change %=10
      this.yen5=Math.floor(change/5);
      this.yen1=change % 5; //5で割り切れなった余りが全部1円になる。
    }
  }
})
</script>

【5分で作る】Vue.js+Bootstrapで小銭計算プログラムを作ろう

C#実現KNNアルゴリズム