表单
可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model会忽略所有表单元素的value、checked、selected属性的初始值而总是将Vue实例的数据作为数据来源。所以需要通过JavaScript在组件的data选项中声明初始值。
v-model在内部为不同的输入元素使用不同的property并抛出不同的事件：
text和textarea元素使用value property和input事件；
checkbox和radio使用checked property和change事件；
select字段将value作为prop并将change作为事件。
1.文本输入
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</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>
<style type="text/css">
</style>
</body>
</html>
2.多行文本输入
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<p style="white-space: pre-line;">{{message}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
message: "",
},
});
</script>
<style type="text/css">
</style>
</body>
</html>
3.复选框
单个复选框，绑定到布尔值：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
checked: "",
},
});
</script>
<style type="text/css">
</style>
</body>
</html>
多个复选框，绑定到同一个数组：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div style="margin-top: 20px;">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
checkedNames: [],
},
});
</script>
<style type="text/css">
</style>
</body>
</html>
4.单选按钮
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div style="margin-top: 20px;">
<input type="radio" id="one" value="one" v-model="picked">
<label for="one">one</label>
<input type="radio" id="two" value="two" v-model="picked">
<label for="two">two</label>
<br>
<span>picked : {{ picked }}</span>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
picked: "",
},
});
</script>
<style type="text/css">
</style>
</body>
</html>
5.提交表单数据
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<p style="white-space: pre-line;">{{message}}</p>
<div style="margin-top: 20px;">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<div style="margin-top: 20px;">
<input type="radio" id="one" value="one" v-model="picked">
<label for="one">one</label>
<input type="radio" id="two" value="two" v-model="picked">
<label for="two">two</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: {
message: "",
checkedNames: [],
picked: "",
},
methods: {
submit: function () {
console.log(this.message);
var postObj = {
msg: this.message,
checkVal: this.checkedNames,
pickVal: this.picked,
};
console.log(postObj);
}
}
});
</script>
<style type="text/css">
</style>
</body>
</html>
6.选择框
单选
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div style="margin-top: 20px;">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
selected: "",
},
});
</script>
<style type="text/css">
</style>
</body>
</html>
多选时 (绑定到一个数组)：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div style="margin-top: 20px;">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
selected: [],
},
});
</script>
<style type="text/css">
</style>
</body>
</html>
7.用 v-for 渲染的动态选项：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div style="margin-top: 20px;">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
selected: 'A',
options: [
{text: 'One', value: 'A'},
{text: 'Two', value: 'B'},
{text: 'Three', value: 'C'}
]
},
});
</script>
<style type="text/css">
</style>
</body>
</html>
