一 概念
```html
<div id="app">
<input type="text" v-model='msg'>
<p>{{ msg }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: ''
}
})
</script>
```二 代碼示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app">
<form action="">
<!-- 數據的雙向綁定 -->
<!-- v-model綁定的是value,所以省略 -->
<input type="text" v-model="val1" name="usr">
<textarea v-model="val1"></textarea>
<p v-text="val1"></p>
<!-- 單一復選框 -->
<!-- val2值為true|false的變量,控制單選框是否被選中 -->
<!-- -->
<input type="checkbox" v-model="val2" name="ck1">
<!-- val3值為自定義"選中"|"未選中",控制單選框是否被選中 -->
<!-- 選中狀態,提交給后台可以對應的value為on,為選中狀態,不向后台提交value值 -->
<input type="checkbox" v-model='val3' true-value="選中" false-value="未選中" name="ck2" />
<!-- 多復選框 -->
<!-- 多個復選框的v-model綁定一個變量 -->
<!-- 該變量為數組數據,存放的是復選框的value值(value值必須明確) -->
<!-- 出現在數組中的value值對應的復選框默認為選中狀態 -->
<div>
籃球<input type="checkbox" value="lq" v-model="val4" name="ck3">
足球<input type="checkbox" value="zq" v-model="val4" name="ck3">
乒乓球<input type="checkbox" value="ppq" v-model="val4" name="ck3">
</div>
<!-- 多單選框 -->
<!-- 多個單選框的v-model綁定一個變量 -->
<!-- 變量值為多個單選框中一個的value值,則該單選框為默認選中狀態 -->
<div>
男:<input type="radio" value="男" v-model='val5' name="sex" />
女:<input type="radio" value="女" v-model='val5' name="sex" />
</div>
<button type="submit">提交</button>
</form>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
val1: "",
val2: false,
val3: "選中",
val4: ['lq', 'ppq'],
val5: "女",
}
})
</script>
</html>