Vue.jsサンプルコード(34)逆ポーランド記法の電卓アプリを作る

34. 逆ポーランド記法の電卓アプリを作る

  • Vue.jsバージョン: 2.5.2
  • いわゆる逆ポーランド記法(RPN)方式のお遊び電卓です。
  • [入力] フィールドに数値か演算記号を入力できます。
    • 数値はスタックにプッシュされて下に表示されます。
    • 演算記号は直近の2つのスタックを演算し、2つのスタックをクリアしてから結果をスタックにプッシュします。
  • 入力した瞬間に処理されるので、事実上1桁ずつしか入力できません。
  • 計算できないときはNaNがスタックに置かれます。
  • 画面をリロードすると最初に戻ります。

サンプルコード

ポイント

HTML側でv-forを用いて繰り返しを実現しています。

          <template v-for="e in s.slice().reverse()">
            <li class="list-group-item">
              {{e}}
            </li>
          </template>
        </ul>

バックナンバー(Vue.jsサンプルコード)

Vue.jsサンプルコード(01〜03)Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

Twitter: @hachi8833、GitHub: @hachi8833 コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。 これまでにRuby on Rails チュートリアル第2版の監修および半分程度を翻訳、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れて更新翻訳中。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 実は最近Go言語が好きで、Goで書かれたRubyライクなGoby言語のメンテナーでもある。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

hachi8833の書いた記事

週刊Railsウォッチ

インフラ

ActiveSupport探訪シリーズ

BPSアドベントカレンダー