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

Vue.jsサンプルコード(20)スター[★★★☆☆]をクリックして数値を1桁だけ入力する

追記: JSFiddleでの動作不具合修正のため、過去記事も含めてVue.jsバージョンを2.5.2に更新しました。

20. スター[★★★☆☆]をクリックして数値を1桁だけ入力する

  • Vue.jsバージョン: 2.5.2
  • [★★★☆☆]をクリックすると入力フィールドに変わります。
  • 0から5までの数字を1つ入力すると入力が終了し、★の数に反映されます。
    • (その他の文字を入力した場合や入力なしで終了した場合は正しく反映されません)
  • 画面をリロードすると最初の状態に戻ります。

サンプルコード


ポイント: 1文字入力されたら編集を終了するためにkeyupイベントを使っています。

    <input v-model.number="v" @keyup="f = false" ref="r1" />

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

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

CONTACT

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