Vue.jsでラジオボタンを実装してみます。
まずはHTMLにそのままラジオボタンの要素を記述していきます。
|
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 |
<!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"> <label><input type="radio" v-model="checkWeather" value="晴れ">晴れ</label> <label><input type="radio" v-model="checkWeather" value="曇り">曇り</label> <label><input type="radio" v-model="checkWeather" value="雨">雨</label> <p>{{ checkWeather }}</p> </div> <script> new Vue({ el: '#app', data: { checkWeather: '晴れ' } }); </script> </body> </html> |
11~13行目
v-modelディレクティブを利用してデータとバインドしています。checkWeatherというプロパティ名を設定しています。このcheckWeatherの値に、valueで設定している値が代入されます。
22行目
dataオプションにcheckWeatherプロパティを用意しています。
下記コードは、ラジオボタンの構成データをauthorsというプロパティ名の配列で用意しています。
|
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 |
<!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"> <ul> <li v-for="author in authors"> <label><input type="radio" v-model="checkName" v-bind:value="author.name">{{ author.name }}</label> </li> </ul> <p>{{ checkName }}</p> </div> <script> new Vue({ el: '#app', data: { checkName: '選択して下さい', authors: [ { id: 1, name: '夏目漱石' }, { id: 2, name: '太宰治' }, { id: 3, name: '村上春樹' } ] } }); </script> </body> </html> |
関連ページ
