【アウトプット㊾】-Vue- v-modelを使用してフォームと値を接続する

■テキストフィールドにvue.jsから数字を表示する

▼HTML

<div id="app">
    　//v-bindは省略可能
     <input type="number" v-bind:value="number">=1
</div>

▼vue.js

let app = new Vue({
    el: "#app",
    data:{
        number:999
    }
});

▼表示結果

■テキストフィールドに入力した数字を取り出す

▼HTML

<div id="app">
     <input type="number" v-model="number">={{ number }}
</div>

▼vue.js

let app = new Vue({
    el: "#app",
    data:{
         number:999
    }
});

▼表示結果