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プロパティの値がバインディングされます。