徐州集团网站建设,模板网站和定制网站,seo专员岗位要求,福建龙岩天宫山风景区目录 实验目的相关知识点实验内容代码实现效果 实验目的
#xff08;1#xff09;熟练掌握应用v-model指令实现双向数据绑定的方法#xff0c;学会使用 v-model指令绑定文本框、复选框、单选按钮、下拉菜单#xff1b; #xff08;2#xff09;学会值绑定#xff08;将… 目录 实验目的相关知识点实验内容代码实现效果 实验目的
1熟练掌握应用v-model指令实现双向数据绑定的方法学会使用 v-model指令绑定文本框、复选框、单选按钮、下拉菜单 2学会值绑定将表单控件的值绑定到动态属性和v-model 的修饰符
相关知识点
在 Vue.js 中可以通过 v-model 指令对表单元素进行双向数据绑定。在 修改表单元素值的同时 Vue实例中对应的属性值也会随之更新反之亦然。 1应用v-model指令绑定文本框、复选框、单选按钮、下拉菜单 应用v-model指令可以将单行文本框或多行文本框文本域的值与Vue实 例中的属性值进行双向数据绑定; 可以绑定单个复选框绑定的是一个布尔值 或多个复选框绑定的是一个数组;也可以绑定单选按钮当某个单选按钮被 选中时v-model指令绑定的属性值会被赋值为该单选按钮的value值还可以 应用v-model指令绑定下拉菜单对于单选情形当选择某个选项时v-model 指令绑定的属性值会被赋值为该选项的value值如果未设置value值则被赋 值为该选项中的文本对于多选情形应用v-model指令绑定的则是一个数组。 2使用v-bind指令实现表单控件的值绑定 在通常情况下对于单选按钮、复选按钮、下拉菜单中的选项 v-model 指 令绑定的值是静态字符串对于单个复选框绑定的是布尔值。但是有时需 要将值绑定到 Vue 实例的一个动态属性上而不是绑定到静态字符串这时就 可以使用v-bind 指令来实现。 3v-model指令的修饰符 Vue.js 为 v-model 指令提供了一些修饰符,例如.lazy.number.trim 可以用于处理某些常规操作。
实验内容
使用v-model指令实现表单控件的数据绑定完成用户注册信息的填写和显示功能。要求设计如图1所示的用户注册表单使用v-model指令实现表单控件与Vue实例的相应属性的双向数据绑定当用户填写信息或选择完毕并点击提交按钮程序将用户填写的信息或选择的结果输出至控制台或弹窗显示。
图1 参考基础代码如下 请在此基础上利用v-model指令及其他相关指令或Vue知识完成代码编写和调试。
代码实现
!DOCTYPE html
html
headmeta charsetutf-8title用户注册表单/title
/head
body
div idappform submit.preventsubmitFormp用户名input typetext v-modeluser.name/pp密码input typepassword v-modeluser.password/pp性别labelinput typeradio value男 v-modeluser.gender 男/labellabelinput typeradio value女 v-modeluser.gender 女/label/pp爱好labelinput typecheckbox valuehtml v-modeluser.hobbies html/labellabelinput typecheckbox valueCSS v-modeluser.hobbies CSS/labellabelinput typecheckbox valueVue v-modeluser.hobbies Vue/label/pp所在地select v-modeluser.countryoption value中国中国/optionoption value美国美国/optionoption value其他其他/option/select/pp选择你擅长的技术select v-modeluser.jishu multipleoption valueJavaJava/optionoption value前端vue前端vue/optionoption valuePHPPHP/option/selecth3您选择的技术/h3ulli v-forjishu in user.jishu{{ jishu }}/li/ul/pp可选职位select v-modelselectedJoboption v-forjob in jobs :valuejob{{ job }}/option/selectbutton typebutton clickaddJob添加到已选职位/button/pp已选职位select v-modelselectedJob size5 stylewidth: 200px;option v-forjob in addedJobs :valuejob{{ job }}/option/selectbutton typebutton clickremoveJob移除已选职位/button/ppbutton typesubmit提交/button/p/form
/divscript srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.min.js/script
script
new Vue({el: #app,data: {user: {name: ,password: ,gender: ,hobbies: [],country: ,jishu: [],},jobs: [Java程序员, 软件测试师, 前端工程师],addedJobs: [],selectedJob: ,},methods: {addJob() {if (this.selectedJob !this.addedJobs.includes(this.selectedJob)) {this.addedJobs.push(this.selectedJob);}},removeJob() {if (this.selectedJob) {const index this.addedJobs.indexOf(this.selectedJob);if (index ! -1) {this.addedJobs.splice(index, 1);}}},submitForm() {console.log(提交的用户信息, this.user);console.log(提交的职位, this.addedJobs);alert(提交成功);},},
});
/script
/body
/html
这里不完全是实例代码经过了很大程度的修改
效果
