山崎屋の技術メモ

IT業界で働く中で、気になること、メモしておきたいことを書いていきます。

【Vue】v-bind と v-model の違い

f:id:yyama1556:20180909094238p:plain

Vue.js の勉強を始めました。

基本中の基本ともいえる v-bind と v-model ディレクティブについて、その機能の違いについてメモしておきます。

ざっくり

v-bind は Model の値を HTML コンポーネントに反映(出力)します。HTML コンポーネントの値が変わっても、Model の値は変わりません。Model から HTML への一方通行です。

一方、v-model は Model と View(HTML)の双方向に影響します。 HTML コンポーネントの値に変更があった場合、自動で Model の値を更新します。

サンプル

まずはサンプルです。

HTML

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="app">
        v-bind[{{ data1 }}]
        <div><input type="text" v-bind:value="data1"></div>
        <br><br>
        v-model[{{ data2 }}]
        <div><input type="text" v-model="data2"></div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

そして JavaScript。

var app = new Vue({
    el: '#app',
    data: {
        data1: "data1",
        data2: "data2"
    },
    methods: {
        doAttack : function(index){
            this.list[index].hp -=10;
        }
    }
})

ブラウザに表示したときの初期表示はこうなります。
f:id:yyama1556:20180909095547p:plain

上下それぞれのテキストボックスの値を変えてみましょう。

v-bind でバインディングしたコンポーネントの値を変更しても、Model の値が変更されていないことが確認できます。

一方、v-model のほうは入力と同時に Model の値が変更され、再描画されています。

f:id:yyama1556:20180909095944p:plain

そして、v-bind のテキストボックスは何かのタイミングで "data1" という変更前の値に戻ってしまいます。

まとめ

基本的には、Model の値を表示したいだけなら v-bind。ユーザ入力を即座に Model に反映したいなら v-model。

で、合っているかな?

それでは。

↓↓↓ Kindle 版を買いました。鋭意勉強中!

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js