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

Vue.jsサンプルコード(18)スター[★]を1回だけ押せるようにする

18. スター[★]を1回だけ押せるようにする

  • Vue.jsバージョン: 2.5.2
  • スター[★]ボタンを押すとカウントが0から1に変わります。
  • もう一度押してもカウントアップされません。
  • 画面をリロードするとカウント0に戻ります。

サンプルコード


ポイント: HTML側で@click.once="a += 1"とするだけで「1回だけ」という制限を与えられます。Vue.jsのonce修飾子は便利です。

<div id="app">
  <div class="btn btn-primary" @click.once="a += 1">
    ★
    <div class="badge">
      {{a}}
    </div>
  </div>
</div>

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

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

CONTACT

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