Tech Racho エンジニアの「?」を「!」に。
  • 開発

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・簡単な導入方法・デバッグ・結果の表示とメモ化

CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。