【Vue.js】v-modelとは？使い方をサンプルコードで解説

2020年11月13日

手っ取り早くこのページのサンプルコードを検証するには、下記のvueライブラリを事前に読み込んでおいてください。

v-modelとは

v-modelとは、vue.jsの機能で、data変数とフォームの値を連動させることが出来ます。

例えば、data変数「hoge」をテキストボックスに紐づけた場合、テキストボックスの値を入力すると、変数も変更されます。

逆も然りで、変数をプログラム上で変更させると、フォームの入力内容も変更されます。

vue.jsの特徴である「双方向データバインディング」と呼ばれるものですね。

jQueryなどのように、変数とフォームを都度代入し合わなくてもデータが容易に連携できるようになります。

テキストボックス

テキストボックスのv-modelの設定の一例です。

<div id="app-1">
    <!-- テキストボックスの値を書き換えると、変数も書き換わる -->
    <input type="text" v-model="textsample">
    <p>textsampleの値は「{{ textsample }}」です。</p>
    
    <!-- プログラム上で変数を書き換えると、↑のフォームの値も変わる -->
    <input type="button" value="fugaに置き換え" @click="textsample = 'fuga'" style="margin-top:50px"></button>
</div>

<script>
new Vue({
    el: '#app-1',
    data: {
        textsample : 'hoge',
    }
});
</script>

テキストエリア

テキストボックスとほぼ同じですが、テキストエリアのv-model設定例も残しておきます。

<div id="app-2">
    <!-- テキストボックスの値を書き換えると、変数も書き換わる -->
    <textarea v-model="textareasample">
        
    </textarea>
    <p>textareasampleの値は「{{ textareasample }}」です。</p>
</div>

<script>
new Vue({
    el: '#app-2',
    data: {
        textareasample : 'hoge',
    }
});
</script>

セレクトボックス

通常版

セレクトボックスもv-modelで紐付けることが出来ます。

セレクトボックスの値はoptionで選択されている値(value)と連動します。

<div id="app-3">
    <select v-model="selectsample">
        <option value="hoge">hoge</option>
        <option value="fuga">fuga</option>
        <option value="piyo">piyo</option>
    </select>
    <p>selectsampleの値は「{{ selectsample }}」です。</p>
</div>

<script>
new Vue({
    el: '#app-3',
    data: {
        selectsample : 'hoge',
    }
});
</script>

配列版

セレクトボックスの値を配列に代入したパターンも、このようにv-modelを設定できます。

v-forを使用して、セレクトボックスの値を配列で管理しているため、値の管理が容易ですね。

<div id="app-4">
    <select v-model="selectsample">
        <option v-for="(val, key) in selectlistAry" v-bind:value="val">{{ val }}</option>
    </select>
    <p>selectsampleの値は「{{ selectsample }}」です。</p>
</div>

<script>
new Vue({
    el: '#app-4',
    data: {
        selectlistAry : ['hoge', 'fuga', 'piyo'],
        selectsample : 'hoge',
    }
});
</script>

チェックボックス

単一版

チェックボックスもv-modelで連動させることが出来ますが、単体のチェックボックスの値はboolen型（true・false）となります。

<div id="app-5">
    <input type="checkbox" v-model="checksample" id="check1" /> <label for="check1">チェックする</label>
    <p>checksampleの値は「{{ checksample }}」です。</p>
</div>

<script>
new Vue({
    el: '#app-5',
    data: {
        checksample : false,
    }
});
</script>

複数版（通常）

複数のチェックボックスの場合は、同じv-modelを指定して、それぞれに対応した配列で連動します。

<div id="app-6">
    <input type="checkbox" v-model="checksampleAry" value="hoge" /> hoge
    <input type="checkbox" v-model="checksampleAry" value="fuga" /> fuga
    <input type="checkbox" v-model="checksampleAry" value="piyo" /> piyo
    <p>checksampleAryの値は「{{ checksampleAry }}」です。</p>
</div>

<script>
new Vue({
    el: '#app-6',
    data: {
        checksampleAry : [],
    }
});
</script>

複数版（配列）

v-for、v-bindを使うと楽です。
上と同じ処理ですが値を「checklistAry」に追加するだけでチェックボックスを増やすことが出来ます。

<div id="app-7">
    <span v-for="(val, key) in checklistAry">
        <input type="checkbox" v-model="checksampleAry" v-bind:value="val" /> {{ val }}
    </span>
    <p>checksampleAryの値は「{{ checksampleAry }}」です。</p>
</div>

<script>
new Vue({
    el: '#app-7',
    data: {
        checklistAry : ['hoge', 'fuga', 'piyo'],
        checksampleAry : [],
    }
});
</script>

ラジオボタン

ラジオボタンも他のフォーム同様に、v-modelの指定が可能です。

通常版

<div id="app-8">
    <input type="radio" value="hoge" v-model="radiosample" /> hoge
    <input type="radio" value="fuga" v-model="radiosample" /> fuga
    <input type="radio" value="piyo" v-model="radiosample" /> piyo
    <p>radiosampleの値は「{{ radiosample }}」です。</p>
</div>

<script>
new Vue({
    el: '#app-8',
    data: {
        radiosample : 'hoge',
    }
});
</script>

配列版

候補となる値を配列で管理してあげると、追加、削除が楽ですね。

<div id="app-9">
    <span v-for="(val, key) in radiolistAry">
        <input type="radio" v-bind:value="val" v-model="radiosample" /> {{ val }}
    </span>
    <p>radiosampleの値は「{{ radiosample }}」です。</p>
</div>

<script>
new Vue({
    el: '#app-9',
    data: {
        radiolistAry : ['hoge', 'fuga', 'piyo'],
        radiosample : 'hoge',
    }
});
</script>

---

v-modelはVue.jsの基礎的な機能となるので、是非身につけておきましょう。

以上、v-modelとは？使い方をサンプルコードで解説、でした。