<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../JS/vue.js"></script>
<title>表单输入绑定</title>
</head>
<body>
<!--
表单控件的数据绑定就是用v-model指令来实现的，它会根据控件类型自动选取正确的方法来更新元素。
由于表单控件有不同的类型，如文本输入框、复选框、单选按钮、列表框等，v-model指令在不同的表单控件上应用
时也会有些许差异。
1.v-model指令会忽略所以表单元素的value、checked、selected属性的初始值，而总是将vue实例的数据属性作为
数据来源
2.v-model指令提供了一个trim修饰符，可以自动过滤输入数据首位的空白字符，除了trim修饰符之外还有另外两个修饰符
.lazy(默认情况下v-model在每次input事件触发后将输入框的值和数据进行同步)，.number(如果想自动将用户的输入
数据转为数值类型，可以给v-model添加number修饰符，这个常被用到，因为即使在type="number"时，HTML输入元素的
值也总是返回字符串。如果这个值无法被parseFloat()解析，则会返回原始值)
3.
-->
<div id="app">
<!--单行文本输入框-->
<input type="text" v-model.trim="message" value="Hello vue.js">
<p>{{message}}</p>
<!--多行文本输入框(默认值是放在元素中间的)-->
<textarea v-model="message" rows="3">测试</textarea>
<!--复选框（复选框在单独使用和多个复选框一起使用时，v-model绑定的值会有所不同，对于前者，绑定的是布尔值
，选中则为true，未选中则值为false;后者绑定的是同一个数组，选中的复选框的值将被保存在数组中）-->
<br>
<!--单个复选框(true-value、false-value可以指定选中状态下和未选中状态下v-model绑定的值是什么，当然
我们也可以使用v-bind，将它们动态绑定到data选项中的某个数据属性上。)-->
<input id="agreement" type="checkbox" true-value="yes" false-value="no" v-model="isAgree">
<label for="agreement">{{isAgree}}</label>
<p>单个复选框的值为：{{isAgree}}</p>
<!--多个复选框-->
<br>
<input id="basketball" type="checkbox" value="篮球" v-model="interests">
<label for="basketball">篮球</label>
<input id="football" type="checkbox" value="足球" v-model="interests">
<label for="football">足球</label>
<input id="volleyball" type="checkbox" value="排球" v-model="interests">
<label for="volleyball">排球</label>
<input id="swim" type="checkbox" value="游泳" v-model="interests">
<label for="swim">游泳</label>
<p>你的兴趣爱好是：{{interests}}</p>
<!--单选按钮(当单选按钮被选中时，v-model绑定的数据属性的值会被设置为该单选按钮的value值，可以使用v-bind
将<input>元素的value属性再绑定到另一个数据属性上，这样选中后的值就是这个value属性绑定的数据属性的值)-->
<input id="male" type="radio" :value="genderVal[0]" v-model="gender" >
<label for="male">男</label>
<input id="female" type="radio" :value="genderVal[1]" v-model="gender">
<label for="female">女</label>
<span>性别：{{gender}}</span>
<br>
<!--选择框(与复选框类似，因为选择框可以是单选，也可以是多选(指定<select>元素的multiple属性)，
因此v-model在这两种情况下绑定的值会有所不同。单选时，绑定的是选项的值(<option>元素value属性的值);
多选时，绑定到一个数组，所有选中的选项的值被保存到数组中。
)-->
<br>
<select v-model="education">
<option disabled value="">请选择你的学历</option>
<option>高中</option>
<option>本科</option>
<option>硕士</option>
<option>博士</option>
</select>
<p>您的学历是：{{education}}</p>
<br>
<!--多选选择框-->
<select v-model="searches" multiple>
<option v-for="option in options" :value="option.value">
{{option.text}}
</option>
</select>
<p>您选择的搜索引擎是：{{searches}}</p>
<!---->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message:'vue无难事',
isAgree: false,
interests:[],
gender:'',
genderVal:['帅哥','美女'],
education:'',
searches:[],
options:[{
text:'百度',value:'baidu.com'
},{
text:'谷歌',value:'google.com'
},{
text:'必应',value:'bing.com'
}]
}
});
</script>
</body>
</html>
实例（用户注册）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../JS/vue.js"></script>
<title>用户注册</title>
</head>
<body>
<!--
表单控件的输入绑定是通过v-model指令实现的，v-model指令会根据控件类型自动选取正确的方法来更新元素。
不过由于表单控件有不同的类型，v-model指令在这些控件上应用时会有些差异，而这些差异就是我们开发时需要注意的
地方了，要避免不正确的数据绑定，导致页面渲染的效果出现问题
-->
<div id="app">
<from >
<table border="0">
<tr>
<td>用户名：</td>
<td>
<input type="text" name="username" v-model="user.username">
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="password" v-model="user.password">
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="gender" value="1" v-model="user.gender">男
<input type="radio" name="gender" value="0" v-model="user.gender">女
</td>
</tr>
<tr>
<td>邮件地址：</td>
<td>
<input type="text" name="email" v-model="user.email">
</td>
</tr>
<tr>
<td>密码问题：</td>
<td>
<input type="text" name="pwdQuestion" v-model="user.pwdQuestion">
</td>
</tr>
<tr>
<td>密码答案：</td>
<td>
<input type="text" name="pwdAnswer" v-model="user.pwdAnswer">
</td>
</tr>
<tr>
<td>
<!--.prevent：提交事件不再重新加载页面 -->
<input type="submit" value="注册" @click.prevent="register">
</td>
<td>
<input type="reset" value="重填">
</td>
</tr>
</table>
</from>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
user:{
username:'',
password:'',
gender: '',
email:'',
pwdQuestion:'',
pwdAnswer:''
}
},
methods:{
register(){
//直接打印this.user对象
console.log(this.user)
}
}
});
</script>
</body>
</html>
271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
