Vue.js v-modelで値をバインドする方法

2791 ワード
v-model バインド Vue.js Vue.js テキストリンク

概要

v-modelによって,入力された値をVueで定義したプロパティの値にバインドする機能について記載します。

記述方法

<input v-model="変数名">

変数名にはVueオブジェクト内に定義した変数の名前を指定します。

実例

<body>
    <h1>Vue.js</h1>
    <div id="app">
        <div><test v-bind:name="name" /></div>
        <div><input type="text" v-model="name"></div>
    </div>

    <script>
        var test = Vue.component('test',
        {
            props:['name'],
            template: '<p class="test">{{ name }}!</p>',
        })

        var app = new Vue({
            el: '#app',
            data:{
                name:''
            }
        });
    </script>
</body>

添付した画像のようにテキストエリアに入力した値が出力されます。