Vue.jsで電卓作成 No.1 [式と答えが見える]

少しgoogle maps apiを使った管理サイトを作っていかないようになったので,Vue.jsを少し勉強していきます!

まずは,電卓から作ってみたいと思います.

(ちなみに,ほとんどJavaScript,Vue.jsの経験はありません!)

 

開発環境

  • Vue.js 2.6.11
  • Semantic ui 2.3.3
  • Mac OS 10.15 

実装

計算部分

サイトの方をほぼ同じなので,電卓の主要部分は省略します

式と答えを分ける

  1.  式と答えを分けるために,ansとformulaの二つの変数に分けます
  2. 式(数字もしくは,=,0以外の文字が入力された時)にformulaに文字を保存します
  3. =が押されたときに,答えをansに保存します

コード

gistdba0cf55165e7dafa3529d17b77eb80d

 

結果

f:id:ka1357amnbpdr:20191225000458p:plain

html結果


 

詰まったところ-> 解決

Q.%をボタンで表示すると計算できない

A.evalに%が入力されると'/'とは違うもののために,計算ができない.

 ボタンに%を表示させたい時は,forで回すところを個別に%に設定するしかない?

Q. {{変数}}が表示できない

A.<div id="app">の中に入っていなかった.

 これは,ほんとに気づきませんでした

参考サイト

qiita.com