Vue.jsサンプルコード（21）[はい][いいえ]ボタンを押すと表示を変える

• 前記事: 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サンプルコード（01〜03）Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

• 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桁だけ入力する