表单输入绑定
基础语法
可以用v-model指令在表单〈input〉、〈Textarea〉及〈select〉元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素，尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户用户的输入事件以及更新数据，并对一些极端场景进行特殊处理。
- text和textarea元素使用value属性和input事件双向绑定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type='text/javascript' src='vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<input v-model='message' placeholder="edit me">
<p>Message is: {{message}} </p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
message:''
}
})
</script>
</body>
</html>
Input输入内容直接更新在{{message}}的值里
多行文本框也是同理：
<html>
<head>
<meta charset="utf-8">
<script type='text/javascript' src='vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<input v-model='message' placeholder="edit me">
<p>Message is: {{message}} </p>
<!-- 多行文本输入 -->
<Textarea v-model='message2' placeholder='add multiple lines.'></Textarea>
<p style='white-space:pre-line;'>{{message2}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
message:'',
message2:''
}
})
</script>
</body>
</html>
双向绑定的输出结果如下：
- checkbox和radio使用checked属性和change事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type='text/javascript' src='vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<div style='margin-top:20px;'>
<input type='checkbox' id='chengdu' value='成都' v-model="checkedNames">
<label for="chengdu">成都</label>
<input type='checkbox' id='xiamen' value='厦门' v-model="checkedNames">
<label for="chengdu">厦门</label>
<input type='checkbox' id='chengdu' value='北京' v-model="checkedNames">
<label for="chengdu">北京</label>
<br>
<span>checked names： {{checkedNames}}</span>
</div>
<div style='margin-top:20px;'>
<input type='radio' id='chengdu' value='成都' v-model="picked">
<label for="chengdu">成都</label>
<input type='radio' id='xiamen' value='厦门' v-model="picked">
<label for="chengdu">厦门</label>
<input type='radio' id='chengdu' value='北京' v-model="picked">
<label for="chengdu">北京</label>
<br>
<span>picked： {{picked}}</span>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
checkedNames:[],//checkbox是复选框，选中它的时候会有多个变量保存，固定义为数组。
picked:''
}
})
</script>
</body>
</html>
输出结果如下：
表单提交
在表单元素发生变化的时候，在data中都可以收集到表单元素对应变化的值：
我们在页面中创建提交按钮来绑定提交点击事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type='text/javascript' src='vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<div style='margin-top:20px;'>
<input type='checkbox' id='chengdu' value='成都' v-model="checkedNames">
<label for="chengdu">成都</label>
<input type='checkbox' id='xiamen' value='厦门' v-model="checkedNames">
<label for="chengdu">厦门</label>
<input type='checkbox' id='chengdu' value='北京' v-model="checkedNames">
<label for="chengdu">北京</label>
<br>
<span>checked names： {{checkedNames}}</span>
</div>
<div style='margin-top:20px;'>
<input type='radio' id='chengdu' value='成都' v-model="picked">
<label for="chengdu">成都</label>
<input type='radio' id='xiamen' value='厦门' v-model="picked">
<label for="chengdu">厦门</label>
<input type='radio' id='chengdu' value='北京' v-model="picked">
<label for="chengdu">北京</label>
<br>
<span>picked： {{picked}}</span>
</div>
<button type='button' @click="submit">提交</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
checkedNames:[],//checkbox是复选框，选中它的时候会有多个变量保存，固定义为数组。
picked:''
},
methods: {
submit: function(){
var postObj={
checkval: this.checkedNames,
pickval: this.picked
};
console.log(this.postObj);
}
}
})
</script>
</body>
</html>
- 为啥此处我的console输出结果是undefined,有待解决？
