Vue.js 単一のセレクトボックス(select)のタグの実装サンプル

環境
vue 2.6.14
Google Chrome 106.0.5249.119

構文
1.単一のセレクトの定義
形式 select v-model="value"
単一選択の場合は「v-model="value"」を指定します。
Vueインスタンスのvalue値を ” にします。
2.Vueインスタンスを作成します

new Vue({
        el: セレクター名,
        data: {
          value: セレクトのvalueの値,
        },

「value:値」を指定してセレクトボックスの初期値が表示されます。

使用例

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<body>
  <div id="city">
  都市:<br>
      <select v-model="value">
        <option value="11">東京</option>
        <option value="22">大阪</option>
        <option value="33">福岡</option>
        <option value="44">横浜</option>
      </select>
      <p>{{value}}</p>
    </div>
<script>
     const app = new Vue({
        el: '#city',
        data: {
          value: '33',
        },
      });
</script>
</body>
</html>

結果
セレクトボックスの初期値に「福岡」が表示されます。下に「33」が表示されます。
「横浜」を選択すると、「44」が表示されます。

Vue.js

Posted by arkgame