🎀第一步:首先在html搭建一个form表单页面,要求展示以下信息:
账号、密码、年龄、性别、爱好、所在地区、其他信息
页面效果如下:
HTML结构搭建如下:
<div class="box">
<form>
账号:<input type="text"><br><br> 密码:
<input type="password"><br><br> 年龄:
<input type="number"><br><br> 性别:男
<input type="radio" name="sex">女:<input type="radio" name="sex"><br><br> 爱好:
<input type="checkbox">运动<input type="checkbox">学习<input type="checkbox">旅游<input type="checkbox">手工<br><br> 所在地区
<select>
<option>请选择地区</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>重庆</option>
<option>海南</option>
<option>新疆</option>
<option>吉林</option>
</select><br><br> 其他信息:
<textarea></textarea><br><br>
<input type="checkbox">阅读并接受<a href="javascript:; ">《用户协议》</a>
<button>提交</button>
</form>
</div>
🎀第二步:创建vue实例,与容器绑定,data里面准备一个属性去接收收集到的数据:
<script>
new Vue({
el: '.box',
data: {
userInfo: {}
}
})
</script>
🎀第三步:通过v-model去进行数据的双向绑定:
注意:
- v-model收集的是value值
- 需要给<input type=”radio”/>单选框标签配置value值
- <input type=”checkbox”/>(1)没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)。(2)配置input的value属性,v-model的初始值是非数组,那么收集的就是checked;v-model的初始值是数组,那么收集的的就是value组成的数组。
v-model的三个修饰符
- lazy:失去焦点再收集数据
- number:输入字符串转为有效的数字
- trim:输入首尾空格过滤
🎀第四步:通过JSON.stringify方法去把收集来的数据转换成字符串的格式去输出:
console.log(JSON.stringify(this.userInfo));
🎀完整代码:
<div class="box">
<form @submit.prevent="info"> 账号:
<input type="text" v-model.trim="userInfo.account"><br><br> 密码:
<input type="password" v-model="userInfo.password"><br><br>年龄:<input type="number" v-model.number="userInfo.age"><br><br> 性别:男
<input type="radio" name="sex" v-model="userInfo.sex" value="male">女:<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br><br> 爱好:
<input type="checkbox" v-model="userInfo.hobby" value="sports">运动<input type="checkbox" v-model="userInfo.hobby" value="study">学习
<input type="checkbox" v-model="userInfo.hobby" value="travel">旅游
<input type="checkbox" v-model="userInfo.hobby" value="manual">手工
<br><br> 所在地区
<select v-model="userInfo.city">
<option value="">请选择地区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="chongqing">重庆</option>
<option value="hainan">海南</option>
<option value="xinjiang">新疆</option>
<option value="jilin">吉林</option>
</select><br><br>其他信息:
<textarea v-model.lazy="userInfo.other"></textarea><br><br>
<input type="checkbox" v-model="userInfo.agree">阅读并接受
<a href="javascript:;">《用户协议》</a>
<button>提交</button>
</form>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el: '.box',
data: {
userInfo: {
account: '',
password: '',
age: 18,
sex: 'female',
hobby: [],
city: 'beijing',
other: '',
agree: ''
}
},
methods: {
info() {
console.log(JSON.stringify(this.userInfo));
}
},
})
</script>
用户输入和最终控制台接收到的数据效果展示如下:
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/6247.html