品牌网站建设内容,网站开发服务计入什么科目,网站建设需求公司内部调查,开发公司发展建议前言 以element官网的form表单的-动态增减表单项为例讲解表单验证规则 动态的功能就是v-model配合push v-for 便利来实现的 我们需要熟知2个知识点prop表单验证需要跟v-model绑定的值是一样的#xff0c; 如果是一个数组便利的表单#xff0c;那就需要绑定这个数组每一项…前言 以element官网的form表单的-动态增减表单项为例讲解表单验证规则 动态的功能就是v-model配合push v-for 便利来实现的 我们需要熟知2个知识点prop表单验证需要跟v-model绑定的值是一样的 如果是一个数组便利的表单那就需要绑定这个数组每一项v-model值。
思路讲解 代码实例
templatedivel-form:modeldynamicValidateFormrefdynamicValidateFormlabel-width100pxclassdemo-dynamicel-form-itempropemaillabel邮箱:rules[{ required: true, message: 请输入邮箱地址, trigger: blur },{type: email,message: 请输入正确的邮箱地址,trigger: [blur, change],},]el-input v-modeldynamicValidateForm.email/el-input/el-form-itemel-form-itemv-for(domain, index) in dynamicValidateForm.domains:label域名 index:keydomain.key:propdomains. index .value:rules{required: true,message: 域名不能为空,trigger: blur,}el-input v-modeldomain.value/el-inputel-button click.preventremoveDomain(domain)删除/el-button/el-form-itemel-form-itemel-button typeprimary clicksubmitForm()提交/el-buttonel-button clickaddDomain新增域名/el-buttonel-button clickresetForm()重置/el-button/el-form-item/el-form/div
/template
script
export default {data() {return {dynamicValidateForm: {domains: [{value: ,},],email: ,},};},methods: {submitForm() {this.$refs.dynamicValidateForm.validate((valid) {if (valid) {alert(submit!);} else {console.log(error submit!!);return false;}});},resetForm() {this.$refs.dynamicValidateForm.resetFields();},removeDomain(item) {var index this.dynamicValidateForm.domains.indexOf(item);if (index ! -1) {this.dynamicValidateForm.domains.splice(index, 1);}},addDomain() {this.dynamicValidateForm.domains.push({value: ,key: Date.now(),});},},
};
/script
总结 经过这一趟流程下来相信你也对 vue- form动态表单验证规则-表单验证 有了初步的深刻印象但在实际开发中我 们遇到的情况肯定是不一样的所以我们要理解它的原理万变不离其宗。加油打工人 什么不足的地方请大家指出谢谢 -- 風过无痕
