Vue.jsのv-model【現役エンジニアが解説】
今回は、Vue.jsのv-modelについて、簡単に解説していきます。
v-modelとは
Vue.jsのv-modelでは双方向バインディングが可能です。
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'ほげ'
}
})
</script>
v-modelは上記のように設定することで双方向バインディングされます。
この例では、appのmessageプロパティの値を変えるとinput要素のvalue属性の値も変わり、input要素のvalue属性の値を変えるとappのmessageプロパティの値も変わります。
チェックボックス
v-modelはチェックボックスにも使えます。
<div id="app">
<input type="checkbox" id="apple" value="りんご" v-model="checkedFruits">
<label for="apple">りんご</label>
<input type="checkbox" id="grape" value="ぶどう" v-model="checkedFruits">
<label for="grape">ぶどう</label>
<input type="checkbox" id="orange" value="みかん" v-model="checkedFruits">
<label for="orange">みかん</label>
<br>
<span>選択された果物: {{ checkedFruits }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checkedFruits: []
}
})
</script>
上記のコードでは、複数のチェックボックスにcheckedFruitsプロパティを紐づけています。
このようにすることで、各チェックボックスのvalue属性の値とdataプロパティの値が連動します。
ラジオボタン
ラジオボタンにもv-modelが使えます。
<div id="app">
<input type="radio" id="adult" value="大人" v-model="picked">
<label for="adult">大人</label>
<br>
<input type="radio" id="child" value="子供" v-model="picked">
<label for="child">子供</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>
上記のコードの例では、複数のラジオボタンにpickedプロパティを関連付けさせています。
これによって、選択されたラジオボタンのvalue属性の値とpickedプロパティの値がバインディングされます。