Vue.jsによるセレクトボックス（選択ボックス）を実装します。
1つの値を取得する単一要素と、複数の値を取得する複数要素を実装してみます。
単一要素
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <select v-model="selected"> <option disabled value="">選択して下さい</option> <option v-for="option in options" v-bind:value="option.name" v-bind:key="option.id"> {{ option.name }} </option> </select> <p>{{ selected }}</p> </div> <script> new Vue({ el: '#app', data: { selected: '', options: [ { id: 1, name: '夏目漱石' }, { id: 2, name: '太宰治' }, { id: 3, name: '村上春樹' } ] } }); </script> </body> </html> |
11行目
v-modelディレクティブを利用してデータとバインドします。
13〜15行目
optionはデータを配列で用意しているので、v-forディレクティブで表示させています。
関連ページ
複数要素
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <select v-model="selected" multiple> <option disabled value="">選択して下さい</option> <option v-for="option in options" v-bind:value="option.name" v-bind:key="option.id"> {{ option.name }} </option> </select> <p>{{ selected }}</p> <button @click="clear">クリア</button> </div> <script> new Vue({ el: '#app', data: { selected: [], options: [ { id: 1, name: '夏目漱石' }, { id: 2, name: '太宰治' }, { id: 3, name: '村上春樹' } ] }, methods: { clear: function () { this.selected = [] } } }); </script> </body> </html> |
11行目
selectタグに「multiple」を指定します。
26行目
複数の値を保存するためにバインドする値を配列として用意しています。
