1、系统指令v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="val">
</div>
</body>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'message',
val: 121
}
});
</script>
</html>
① 双向绑定：
V 改变 M 改变
M 改变 V 改变
② v-model:
只能给表单元素绑定默认值（value）
它的数据是双向绑定的
2、model的绑定多行文本输入框
<body>
<div id="app">
{{ msg }}<br/>
<textarea v-model="msg"></textarea>
</div>
</body>
<script src="./vue.js"></script>
<!--
v-model:
给表单元素绑定数据：
-->
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'message'
},
});
</script>
3、绑定多选框
<body>
<div id="app">
<h1>单个多选框绑定值: bool</h1>
{{ singleVal }} <br/>
<input type="checkbox" name="habby" v-model="singleVal">打球
//没选中 singleVal 的值为false，选中立刻变为true
<h1>多个多选框绑定值：数组</h1>
{{ someVal }} <br/>
<input type="checkbox" value="pq" name="aihao" v-model="someVal">打乒乓
<input type="checkbox" value="ym" name="aihao" v-model="someVal">打羽毛
<input type="checkbox" value="wq" name="aihao" v-model="someVal">打网
//选中的 value 值被添加到someVal中
</div>
</body>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'message',
singleVal: false, // 单个
someVal: [] // 多个
},
});
</script>
4、绑定单选框
<body>
<div id="app">
{{ gender }} <br/>
<input type="radio" name="gender" value="男" v-model="gender"> 男
<input type="radio" name="gender" value="女" v-model="gender"> 女
<input type="radio" name="gender" value="保密" v-model="gender"> 保密
</div>
</body>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'message',
gender: '保密'
}
});
</script>
5、绑定下拉框
<body>
<div id="app">
{{ selVal }} <br/>
<select v-model="selVal">
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="sh">上海</option>
<option value="cq">重庆</option>
</select>
</div>
</body>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'message',
selVal: 'tj'
},
});
</script>