推荐开源项目:Vue-ElementUI - 简约而不简单的后台管理系统构建框架
Vue-ElementUI 是一个使用 Vue.js 和 Element UI 组件库构建的后台管理系统的简易示例。以下是一个简化的代码实例,展示了如何使用 Vue 和 Element UI 创建一个简单的登录页面:
<template>
<el-form ref="loginForm" :model="loginForm" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="loginForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
<el-button @click="resetForm('loginForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('登录成功!');
} else {
alert('请输入正确的用户名和密码!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
这个简单的登录页面展示了如何使用 Vue 和 Element UI 快速搭建一个后台管理系统的登录界面。它包括了表单的验证和重置功能。这个示例代码可以作为开发者学习和实践的起点。
评论已关闭