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

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

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

hachi8833の書いた記事

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ