vue用户登录注册案例,vue 登录模板
这篇文章主要介绍了某视频剪辑软件实现登录注册模板的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
模板1:
login.vue
模板
p class=登录
El-tabs v-model= active name @ ta B-click= handle click
el-tab-pane label=登录name=first
El-form:model= rule form :rules= rules ref= rule form label-width= 100px class= demo-rule form
El-表单-项目标签=名称prop= name El-input v-model=规则形式。名称/El-输入/El-表单-项目
El-表单-项目标签=密码prop= pass El-input type= password v-model=规则形式。pass auto-complete= off /El-input/El-form-item
埃尔-表单-项目
El-button type= primary @ click= submit form( rule form )登录/el-button
El-button @ click=重置表单(规则表单)重置/el-button
/El-表单-项目
/el格式
/El-选项卡-窗格
el-tab-pane label=注册name=second
注册/注册
/El-选项卡-窗格
/el-tabs
/p
/模板
脚本
从" @/组件/寄存器"导入注册表；
导出默认值{
data() {
var有效通行证=(规则，值，回调)={
if (value===) {
回调（新错误(请输入密码));
}否则{
if (this.ruleForm.checkPass！==) {
这个参考文献。规则形式。验证字段(“检查通过”)；
}
回调();
}
};
返回{
activeName: first ，
规则形式：{
名称： ,
通过： ,
检查通过：""
},
规则：{
名称：[{要求：真，消息： 请输入您的名称，触发器： 模糊 },{最短：2,最长：5,消息：长度在2到5个字符，触发器：模糊 }],
通过：[{必需：真，验证：验证通过，触发：模糊 }]
}
};
},
方法：{
//选项卡切换
handleClick(tab，event) {}，
//重置表单
resetForm(formName) {
这个参考文献[表单名]。resetFields()；
},
//提交表单
submitForm(formName) {
这个参考文献[表单名]。验证（有效={
如果（有效){
这个消息({
类型："成功",
消息： 登录成功
});
这个1000美元路由器。push( home )；
}否则{
console.log(错误提交！);
返回错误的
}
});
}
},
组件：{
注册
}
};
/脚本
样式lang=scss 。登录{
宽度：400像素
边距：0自动；
}。el-tabsitem {
文本对齐：居中；
宽度：60px
}
/风格
注册。某视频剪辑软件
//寄存器组件
模板
El-form:model= rule form :rules= rules ref= rule form label-width= 100px class= demo-rule form
El-表单-项目标签=用户名prop= name El-input v-model=规则形式。名称/El-输入/El-表单-项目
El-表单-项目标签=密码prop= pass El-input type= password v-model=规则形式。pass auto-complete= off /El-input/El-form-item
El-表单-项目标签=确认密码prop= check pass El-input type= password v-model=规则表单。检查通过 auto-complete= off /El-input/El-form-item
埃尔-表单-项目
El-button type= primary @ click= submit form( rule form )注册/el-button
El-button @ click=重置表单(规则表单)重置/el-button
/El-表单-项目
/el格式
/模板
脚本
导出默认值{
data() {
var有效通行证=(规则，值，回调)={
if (value===) {
回调（新错误(请输入密码));
}否则{
if (this.ruleForm.checkPass！==) {
这个参考文献。规则形式。验证字段(“检查通过”)；
}
回调();
}
};
var validatePass2=(规则，值，回调)={
if (value===) {
回调（新错误(请再次输入密码));
} else if(值！==this.ruleForm.pass) {
回调（新错误(两次输入密码不一致!));
}否则{
回调();
}
};
返回{
activeName:秒，
规则形式：{
名称： ,
通过： ,
检查通过：""
},
规则：{
名称：[{要求：真，消息： 请输入您的名称，触发器： 模糊 },{最短：2,最长：5,消息：长度在2到5个字符，触发器：模糊 }],
pass: [{ required: true，validate:validate pass，trigger: blur }]，
checkPass: [{ required: true，validatePass2，trigger: blur }]
}
};
},
方法：{
submitForm(formName) {
这个参考文献[表单名]。验证（有效={
如果（有效){
这个消息({
类型："成功",
消息： 注册成功
});
//this.activeName: first ，
}否则{
console.log(错误提交！);
返回错误的
}
});
},
resetForm(formName) {
这个参考文献[表单名]。resetFields()；
}
}
};
/脚本
效果图
模板2:
login.vue
模板
El-row type= flex justify= center
El-form ref= formData :model= formData :rules= rules label-width= 80px @ keyup。进入。native= log in()
el-form-item prop=用户名标签=用户名El-input v-model= formdata。用户名 placeholder=请输入用户名prefix-icon= icon-log in _ user clearable/El-input/El-form-item
El-form-item prop= password label=密码El-input v-model= formdata。密码 placeholder=请输入密码type= password prefix-icon= icon-log in _ pwd clearable/El-input/El-form-item
/El-表单-项目
El-form-itemel-button type= primary class= BTN @ click= log in( formData ) icon= El-icon-upload 登录/el-button
El-button @ click=重置表单( formData )重置/el按钮/el表单项/el表单项
路由器-link to=register 没有密码？注册/路由器链接
/el格式
/el-row
/模板
脚本
导出默认值{
data() {
返回{
表单数据：{
用户名： ,
密码：""
},
规则：{
用户名：[{必填：真，消息： 用户名不能为空，触发器：模糊 }],
密码：[{必填：真，消息： 密码不能为空，触发器：模糊 }]
}
};
},
方法：{
登录（表单名){
这个参考文献[表单名]。验证（有效={
如果（有效){
这个消息({
类型："成功",
消息： 登录成功
});
这个1000美元路由器。push({ name: home })；
}否则{
console.log(错误提交！);
返回错误的
}
});
},
resetForm(formName) {
这个参考文献[表单名]。resetFields()；
}
}
};
/脚本
注册。某视频剪辑软件
模板
El-row type= flex justify= center
El-form ref= formData :model= formData :rules= rules label-width= 80px @ keyup。进入。native= register()
el-form-item prop=用户名标签=用户名El-input v-model= formdata。用户名 placeholder=请输入用户名prefix-icon= icon-log in _ user clearable/El-input/El-form-item
El-form-item prop= password label=密码El-input v-model= formdata。密码 placeholder=请输入密码type= password prefix-icon= icon-log in _ pwd clearable/El-input/El-form-item
El-form-item prop= check password label=确认密码El-input v-model= formdata。检查密码 placeholder=再次输入密码type= password prefix-icon= icon-log in _ pwd clearable/El-input/El-form-item
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= register( formData ) icon= El-icon-upload 注册/el-button
El-button @ click=重置表单( formData )重置/el按钮/el表单项目
路由器-link to=login 已有密码？登录/路由器链接
/el格式
/el-row
/模板
脚本
导出默认值{
data() {
var有效通行证=(规则，值，回调)={
if (value===) {
回调（新错误(请再次输入密码));
} else if(值！==this.formData.password) {
回调（新错误(两次输入密码不一致!));
}否则{
回调();
}
};
返回{
表单数据：{
用户名： ,
密码： ,
cheackPassword:" "
},
规则：{
用户名：[{必填：真，消息： 用户名不能为空，触发器：模糊 }],
密码：[{必填：真，消息： 密码不能为空，触发器：模糊 }],
cheackPassword: [{必需：真，验证：验证通过，触发：模糊 }]
}
};
},
方法：{
注册(表单名){
这个参考文献[表单名]。验证（有效={
如果（有效){
这个消息({
类型："成功",
消息： 注册成功
});
这个1000美元路由器。推送({ name:登录 })；
}否则{
console.log(错误提交！);
返回错误的
}
});
},
resetForm(formName) {
这个参考文献[表单名]。resetFields()；
}
}
};
/脚本
效果图
关于vue登录注册模板的样例代码这篇文章就到这里了。有关vue登录注册模板的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。