あなたは、フォームの<input>、<TEXTAREA>にV-modelコマンドを使用して、要素に結合双方向のデータを作成するために、<select>のことができます。これは自動的に制御型の要素を更新するための正しい方法を選択します。一方で、いくつかの魔法が、Vモデルは、基本的に単なる構文糖です。これは、データを更新するために、ユーザの入力イベントを監視する責任があり、そしていくつかの極端なシナリオは、いくつかの特別な処理を行います。
Vモデルは、データのVueのが、常にデータソースの一例としての要素を形成するための値、チェック、選択された特性のすべての初期値を無視します。あなたはJavaScriptを介してデータのオプション・コンポーネントの初期値を宣言する必要があります。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<!--第一种方法是使用ref进行的双向绑定，利用了$refs获取value值进行绑定-->
<h1>双向数据绑定： input,select,textarea</h1>
<label>姓名：</label>
<input type="text" ref="name" v-on:keyup="logName">
<span>{{name}}</span>
<label>年龄：</label>
<input type="text" ref="age" v-on:keyup="logAge">
<span>{{age}}</span>
<!--第二种则直接进行的双向绑定，使用了vue提供的v-model指令-->
<h1>另一种双向数据绑定</h1>
<label>姓名：</label>
<input type="text" v-model="name2">
<span>{{name2}}</span>
<script type="text/javascript" src="app.js"></script>
</body>
</html>app.js
new Vue({
el: '#app',
data: {
name: '',
name2: '',
age: ''
},
methods: {
logName: function() {
this.name = this.$refs.name.value;
},
logAge: function() {
this.age = this.$refs.age.value;
}
}
});