Vue.js 複数のセレクトボックス(select multiple)タグの実装サンプル
環境
vue 2.6.14
Google Chrome 106.0.5249.119
構文
1.複数のセレクトの定義
<select v-model="value" multiple>
セレクトボックスに v-model=”プロパティ値” を記載し、バインディングが使えるようにします。
複数選択の場合セレクトタグにmultipleを付加します。
2.Vueインスタンスを作成します
new Vue({ el: 'セレクター名', data: { value: ["セレクトの項目の番号"], },
「value:[“数値"]」を指定してセレクトの項目の初期値を設定します。
使用例
<!DOCTYPE html> <html> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <body> <div id="city"> <select v-model="value" multiple> <option value="1">東京</option> <option value="2">大阪</option> <option value="3">福岡</option> <option value="4">横浜</option> </select> <p>{{value}}</p> </div> <script> const app = new Vue({ el: '#city', data: { value: ["2"], }, }); </script> </body> </html>
結果
「福岡」を選択すると、[ “3" ]が表示されます。
「横浜」を選択すると、[ “4" ]が表示されます。
[大阪]と「福岡」を選択すると、[ “2", “3" ]が表示されます。