初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。
今回はvue.jsを使わずに、べたべたに書いた時のサンプル。
id振り振りなかんじ。
一番コード量は少ないけど、viewを直接書き換えたりしてて、いやんなかんじですね。
<html> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <script> $(document).ready(function(){ $("#calc").on('click' , function(e){ //一番ベタなパターン //JSからUI要素を触りすぎ //IDがいっぱい増えていやなかんじ //Vとコードが密結合 $("#answer").html( parseFloat($("#data1").val()) + parseFloat($("#data2").val())); }); } ); </script> <body> <!-- View --> <div id="demo"> <input id="data1" value="10" type="number"> <p>+</p> <input id="data2" value="2" type="number"> <button id="calc">=</button> <p id="answer"></p> </div> </body> </html>
次回からちょっとずつ書き換えていきます。