v-mode指令
一 概念
```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>
