- 前記事: 20. スター[★★★☆☆]をクリックして数値を1桁だけ入力する
- 次記事: 22. YouTube風の[][]ボタンで1度だけGood/Bad評価する
21. [はい][いいえ]ボタンを押すと表示を変える
- Vue.jsバージョン: 2.5.2
- [はい]または[いいえ]ボタンを押すと「ありがとうございました!」に変わります。
- 画面をリロードすると最初の状態に戻ります。
サンプルコード
ポイント: HTMLコード中のdata-v
はHTML 5のカスタムデータ属性です。
<div @click="a" data-v="yes">
はい
</div>
<div @click="a" data-v="no">
いいえ
</div>
カスタムデータ属性は、JavaScriptのHTMLElement.dataset
でリードオンリーで読み取れます。
this.answer = e.target.dataset.v
- 前記事: 20. スター[★★★☆☆]をクリックして数値を1桁だけ入力する
- 次記事: 22. YouTube風の[][]ボタンで1度だけGood/Bad評価する
バックナンバー(Vue.jsサンプルコード)
- Vue.jsサンプルコード(04)双方向データバインディングを使ってみる
- Vue.jsサンプルコード(05)複数のinputに同じ変数を割り当てる
- Vue.jsサンプルコード(06)合計金額をリアルタイムに表示する
- Vue.jsサンプルコード(07)入力文字数をリアルタイムにプレビューする
- Vue.jsサンプルコード(08)入力したカラーコードをリアルタイムでプレビューする
- Vue.jsサンプルコード(09)カラーピッカーで選択した色を動的に表示する
- Vue.jsサンプルコード(10)スライダーで入力したカラーコードを動的に表示する
- Vue.jsサンプルコード(11)ラベルをクリックして表示開閉とラベル変更を行う
- Vue.jsサンプルコード(12)特定の単語を入力したらボタンを無効にする
- Vue.jsサンプルコード(13)「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする
- Vue.jsサンプルコード(14)「承認」ボタンを押したら解除できないようにする
- Vue.jsサンプルコード(15)パスワードのマスクを解除する
- Vue.jsサンプルコード(16)パスワードを入力中だけ表示する
- Vue.jsサンプルコード(17)[いいね]ボタンを押すとボタンが文言に変わる
- Vue.jsサンプルコード(18)スター[★]を1回だけ押せるようにする
- Vue.jsサンプルコード(19)文字をクリックすると編集できるようにする
- Vue.jsサンプルコード(20)スター[★★★☆☆]をクリックして数値を1桁だけ入力する