Vue.js ラジオボタン(radio)タグの実装サンプル
環境
vue 2.6.14
Google Chrome 106.0.5249.119
構文
1.ラジオボタンの定義
input id="ra" type="radio" v-model="value" value="1″
ラジオはインプットタグの中にv-model=”プロパティ名”という形でタグを作ります。
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="cft">
<input id="ra" type="radio" v-model="value" value="1" /><label
for="ra">東京</label>
<input id="rb" type="radio" v-model="value" value="2" /><label
for="rb">大阪</label>
<input id="rc" type="radio" v-model="value" value="3" /><label
for="rc">福岡</label>
<p>{{value}}</p>
</div>
<script>
const app = new Vue({
el: '#cft',
data: {
value: '2',
},
});
</script>
</body>
</html>
結果
画面にラジオボタン「大阪」が選択されます。ラジオボックスをクリックすると、その番号が下に表示されます。