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」が表示されます。