一．vue 的优势1. 简洁易学：Vue采用了简洁的模板语法，易于理解和学习，使开发者能够快速上手。2. 响应式：Vue使用了双向绑定机制，能够自动追踪数据的变化并实时更新视图，提高了开发效率。3. 组件化开发：Vue采用了组件化的思想，将页面抽象为独立的组件，可以复用和组合，提高了代码的可维护性和可重用性。4. 虚拟DOM：Vue采用了虚拟DOM的机制，在数据发生变化时，只重新渲染发生变化的部分，减少了DOM操作，提高了性能。5. 生态丰富：Vue拥有一个活跃的社区，有很多开源的插件和工具可供选择，且与其他前端库和框架（如React和Angular）的兼容性较好。6. 渐进式框架：Vue是一个渐进式框架，可以根据项目需要逐步引入，不强制使用整个框架，更加灵活。7. 官方支持：Vue由一个专门的团队进行维护和更新，有完善的官方文档和社区支持，能够提供及时的技术支持和解决方案。8. 性能优化：Vue提供了很多性能优化的手段，如异步组件、懒加载、代码拆分等，能够提高应用的加载速度和运行效率。9. 可测试性：Vue提供了便于测试的工具和方法，使开发者能够编写高质量、可靠的测试用例。10. 适用于移动端开发：Vue提供了Vue.js的移动端解决方案Vue Native，能够快速开发高性能的移动应用程序。二、element 优势1. 设计美观：Element UI是一个基于Vue.js的UI库，提供了一套美观、简洁的UI组件，能够让开发者快速构建出现代化的网页界面。2. 组件丰富：Element UI提供了丰富的组件，包括按钮、表格、弹窗、表单等常用组件，覆盖了大部分开发需求，可以极大地提高开发效率。3. 响应式布局：Element UI的组件都是响应式的，能够自动适应不同屏幕大小和设备类型，使得网页在不同平台上具有良好的兼容性和展示效果。4. 可定制性强：Element UI提供了丰富的主题和样式定制选项，开发者可以根据自己的需求来自定义组件的外观和风格。5. 文档和示例丰富：Element UI有详尽的官方文档和示例，对每个组件进行了详细的介绍和使用说明，方便开发者快速上手和解决问题。6. 社区活跃：Element UI拥有庞大的开发者社区，可以获取到各种问题的解答和开发经验分享，能够快速解决开发过程中的困难和疑惑。7. 与Vue配套：Element UI是专门为Vue.js开发的UI库，与Vue完美配合，能够充分发挥Vue的优势，提供更加优雅和高效的开发体验。8. 国际化支持：Element UI支持多种语言，包括中文、英文等，能够方便地满足国际化项目的需求。9. 优秀的性能：Element UI经过优化和压缩，具有较高的运行效率和加载速度，能够提供流畅的用户体验。10. 持续更新和维护：Element UI由一个专门的团队进行维护和更新，保持了较快的更新速度和良好的兼容性，能够及时解决Bug和提供新功能。三、html代码 ref=refForm

:value=item.value :value=item.value placeholder=感兴趣产品（生命科学实验室设备） placeholder=特别要求 提交 在 el-form-item添加 :rules=[{ required: true, message: 请输入你的要求, trigger: blur }]验证规则四、js代码 newVue({ el:#app, data() { return{ // 用户类型 usertype:[ { value:最终用户, label:最终用户}, { value:分销商, label:分销商}, { value:经销商, label:经销商}, ], // 国家 city:city_arr, ruleForm:{ type:申请报价, }, rules:{}, isSubmitting:false, // 产品一 product:[ { value:生命科学实验室设备, label:生命科学实验室设备, children:[ { value:生物安全柜, label:生物安全柜}, { value:超净工作台, label:超净工作台}, { value:二氧化碳培养箱, label:二氧化碳培养箱}, { value:超低温冰箱, label:超低温冰箱}, { value:离心机, label:离心机}, { value:摇床, label:摇床}, { value:PCR基因扩增仪, label:PCR基因扩增仪}, { value:实验室培养箱, label:实验室培养箱}, { value:实验室烘箱, label:实验室烘箱}, { value:低温培养箱, label:低温培养箱}, { value:实验室通风橱, label:实验室通风橱}, { value:无管道通风橱, label:无管道通风橱}, ] }, { value:医疗/IVF专用设备, label:医疗/IVF专用设备, children:[ { value:胚胎差时监视优育系统, label:胚胎差时监视优育系统}, { value:IVF专用多腔室培养箱, label:IVF专用多腔室培养箱}, { value:多区温控IVF工作站, label:多区温控IVF工作站}, { value:二氧化碳培养箱, label:二氧化碳培养箱}, { value:抗震动实验台, label:抗震动实验台}, { value:CO2/O2//温度验证设备, label:CO2/O2//温度验证设备}, ] }, { value:制药专用设备, label:制药专用设备, children:[ { value:无菌检测隔离器, label:无菌检测隔离器}, { value:洁净层流称量室, label:洁净层流称量室}, { value:粉末样品称量柜, label:粉末样品称量柜}, { value:软帘式洁净棚, label:软帘式洁净棚}, { value:风淋室, label:风淋室}, { value:传递窗, label:传递窗}, { value:转移舱, label:转移舱}, ] }, ], } }, methods:{ submitForm(formName) { this.$refs[formName].validate((valid) ={ if(valid) { console.log(this.ruleForm); that=this; that.isSubmitting= true; $.ajax({ url:url, type:POST, data:this.ruleForm, cache:false, success:function(res) { that.isSubmitting= false; if(res.code==1){ that.ruleForm={}; that.$message({ message:res.msg, type:success, }); }else{ that.$message({ message:res.msg, type:error, }); } }, error:function(res) { that.$message({ message:res.msg, type:error, }); } }) } else{ console.log(error submit!!); returnfalse; } }); }, resetForm(formName) { this.removeRules(); this.$refs[formName].resetFields(); }, } })

用vue.js+element做表单验证提交_成都网站制作   https://www.cdnanqi.cn/wangzhanzhizuo/10847.html