Vue 表單數據雙向綁定 v-mode
每一個Vue項目，每一個系統，肯定涉及到表單的雙向數據綁定問題，這一部分是 vue 的重中之重，不是因為知識點復雜，而是因為只要參與 vue 項目的開發，那么就必不可少。
單向綁定
數據變，視圖變；視圖變（瀏覽器控制台上更新html），數據不變；這樣的都是單向綁定。
雙向綁
數據變，視圖變；視圖變（在輸入框更新），數據變；
基礎用法
v-model 指令，用於表單數據雙向綁定，針對以下幾種類型：
- text 文本
- testarea 多行文本
- radio 單選框
- checkbox 復選框
- select 下拉框
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表單數據雙向綁定</title>
</head>
<body>
<div id="app">
<!-- 阻止事件默認行為，當前阻止的是submit -->
<form action="#" @submit.prevent="submitForm">
姓名（文本）：<input type="text" v-model="name">
<br><br>
性別（單選按鈕）：
<input type="radio" name="sex" value="1" v-model="sex">男
<input type="radio" name="sex" value="0" v-model="sex">女
<br><br>
技能（多選框）：
<input type="checkbox" name="skills" value="java" v-model="skills">java開發
<input type="checkbox" name="skills" value="vue" v-model="skills">vue
<input type="checkbox" name="skills" value="python" v-model="skills">python
<br><br>
城市（下拉框）：
<select name="citys" v-model="city">
<option v-for="c in citys" :value="c.code">{{c.name}}</option>
</select>
<br><br>
說明（多行文本）: <br>
<textarea id="" cols="30" rows="5" v-model="desc"></textarea>
<br><br>
<button type="submit">提交</button>
</form>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
name: '',
sex: '0', // 默認值為0，它就會選中值為0的，也就是女生。
skills: ['vue'], // 復選框被勾選之后會獲得數組形式,默認選中vue。
citys: [
{ code: 'bj', name: '北京' },
{ code: 'sd', name: '山東' },
{ code: 'sh', name: '上海' },
],
city: 'sd',
desc: '',
},
methods: {
submitForm: function () {
// 處理提交表單。
// 發送ajax請求異步處理。
alert(this.name + ',' + this.sex + ',' + this.skills + ',' + this.city + ',' + this.desc)
}
},
})
</script>
</body>
</html>
