收集表单信息
Input
- label for 和 input id 关联, 点击账号标签 也能聚焦 input
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- label for 和 input id 关联, 点击账号标签 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br></div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",},methods: {},});</script>
</html>
运行效果
Radio
- name=‘xxx’ 归为一组 实现互斥选择
- 指定自定义value值 否则默认为 true/false
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- for 和 id 关联 点击 账号 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br><label >性别：</label><!-- 1. name='sex' 归为一组 实现互斥选择 2. 指定自定义value值 否则默认为 true/false--><input name="sex" type="radio" value="男" v-model="sex">男<input name="sex" type="radio" value="女" v-model="sex">女<br><br></div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",sex:'',},methods: {},});</script>
</html>
运行效果
Checkbox (多个)
- 指定自定义value值 否则默认为 true/false
- 支持多选，需将绑定的变量设置为数组
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- for 和 id 关联 点击 账号 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br><label >性别：</label><!-- 1. name='sex' 归为一组 实现互斥选择 2. 指定自定义value值 否则默认为 true/false--><input name="sex" type="radio" value="男" v-model="sex">男<input name="sex" type="radio" value="女" v-model="sex">女<br><br><label >爱好：</label><!-- 1. 指定自定义value值 否则默认为 true/false2. 支持多选，需将绑定的变量设置为数组 hobby=[]--><input type="checkbox" value="爬山" v-model="hobby">爬山<input type="checkbox" value="健身" v-model="hobby">健身<input type="checkbox" value="唱歌" v-model="hobby">唱歌<br><br><!--<label >所属地区：</label><select v-model="city"><option value="">请选择地区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option></select><br><br><label >描述信息：</label><textarea v-model="description"></textarea><br><br><input type="checkbox" v-model="read">阅读并接受<a href="http://www.baidu.com">《用户协议》</a><br><br><button @click="submit">注册</button> --></div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",sex:'',hobby:[],city:"",description:'',read:""},methods: {submit(){}},});</script>
</html>
运行效果
Select
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- for 和 id 关联 点击 账号 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br><label >性别：</label><!-- 1. name='sex' 归为一组 实现互斥选择 2. 指定自定义value值 否则默认为 true/false--><input name="sex" type="radio" value="男" v-model="sex">男<input name="sex" type="radio" value="女" v-model="sex">女<br><br><label >爱好：</label><!-- 1. 指定自定义value值 否则默认为 true/false2. 支持多选，需将绑定的变量设置为数组 hobby=[]--><input type="checkbox" value="爬山" v-model="hobby">爬山<input type="checkbox" value="健身" v-model="hobby">健身<input type="checkbox" value="唱歌" v-model="hobby">唱歌<br><br><label >所属地区：</label><!-- 单选 指定自定义value值 --><select v-model="city"><option value="">请选择地区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option></select><br><br></div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",sex:'',hobby:[],city:"",},methods: {},});</script>
</html>
运行效果
Textarea
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- for 和 id 关联 点击 账号 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br><label >性别：</label><!-- 1. name='sex' 归为一组 实现互斥选择 2. 指定自定义value值 否则默认为 true/false--><input name="sex" type="radio" value="男" v-model="sex">男<input name="sex" type="radio" value="女" v-model="sex">女<br><br><label >爱好：</label><!-- 1. 指定自定义value值 否则默认为 true/false2. 支持多选，需将绑定的变量设置为数组 hobby=[]--><input type="checkbox" value="爬山" v-model="hobby">爬山<input type="checkbox" value="健身" v-model="hobby">健身<input type="checkbox" value="唱歌" v-model="hobby">唱歌<br><br><label >所属地区：</label><!-- 单选 指定自定义value值 --><select v-model="city"><option value="">请选择地区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option></select><br><br><label >描述信息：</label><textarea v-model="description"></textarea><br><br></div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",sex:'',hobby:[],city:"",description:''},methods: {},});</script>
</html>
运行效果
Checkbox（单个）
- 就是要值是true/false, 因此无需自定义value
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- for 和 id 关联 点击 账号 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br><label >性别：</label><!-- 1. name='sex' 归为一组 实现互斥选择 2. 指定自定义value值 否则默认为 true/false--><input name="sex" type="radio" value="男" v-model="sex">男<input name="sex" type="radio" value="女" v-model="sex">女<br><br><label >爱好：</label><!-- 1. 指定自定义value值 否则默认为 true/false2. 支持多选，需将绑定的变量设置为数组 hobby=[]--><input type="checkbox" value="爬山" v-model="hobby">爬山<input type="checkbox" value="健身" v-model="hobby">健身<input type="checkbox" value="唱歌" v-model="hobby">唱歌<br><br><label >所属地区：</label><!-- 单选 指定自定义value值 --><select v-model="city"><option value="">请选择地区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option></select><br><br><label >描述信息：</label><textarea v-model="description"></textarea><br><br><input type="checkbox" v-model="read">阅读并接受<a href="http://www.baidu.com">《用户协议》</a><br><br><button @click="submit">提交</button> </div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",sex:'',hobby:[],city:"",description:'',read:""},methods: {submit(){console.log("----------------提交表单了----------------")console.log("账号：" + this.account)console.log("密码：" + this.password)console.log("性别：" + this.sex)console.log("爱好：" + this.hobby)console.log("地区：" + this.city)console.log("描述：" + this.description)console.log("已读协议：" + this.read)}},});</script>
</html>
运行效果
- 填写表单信息并提交
特殊说明
- v-model.number ： 保证收集到的数据为数字
- v-model.lazy ： 失去焦点再去收集数据
- v-model.trim ：收集到的数据去除了前后空格
