Vue.jsのv-model【現役エンジニアが解説】

PROGRAM

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