MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. ディレクティブのラジオボタン

ディレクティブのラジオボタン

Vue.js
2023.08.08

ラジオボタンは、選択オプション全てにv-modelを渡すのが必要になるます。

v-modelラジオボタンの説明図
記法

[ HTML ] =============================
　<input type=”radio” value=”データ” v-model=”データプロパティ名”>

[ Vue.js ] =============================
　data() {
　　return {
　　　データプロパティ名 : データ;
　　},
　},

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ラジオボタンについて</title>
  </head>
  <body>
    <div id="app">
      <p>選択してください。</p>
      <form>
        <div>
          <label for="apple">りんご</label>
          <input type="radio" id="apple" value="りんご" v-model="fruits" />
        </div>
        <div>
          <label for="grape">ぶどう</label>
          <input type="radio" id="grape" value="ぶどう" v-model="fruits" />
        </div>
        <div>
          <label for="orange">オレンジ</label>
          <input type="radio" id="orange" value="オレンジ" v-model="fruits" />
        </div>
      </form>
      <p>選択した果物:{{ fruits }}</p>
    </div>

    <script src="./js/radio.js"></script>
  </body>
</html>
Vue.createApp({
  data() {
    return {
      // 初期の選択状態
      fruits: "オレンジ",
    };
  },
}).mount("#app");
出力結果

選択してください。

選択した果物:{{ fruits }}

v-modelの値とデータプロパティ値が等しい場合に選択状態なる

Vue.js