Vue 复习考试练习

一，先做一个登录页面login.html，效果如下图
1，当用户名或密码为空时，单击登录提示

2，当用户名是admin密码是123是跳转到主页面index.html页面

3，完成添加功能
当姓名为空时，点击添加提示如下图

2，当性别为空时提示

3，当年龄为空时提示

4，完成搜索功能

完成，删除功能

login.html页面代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="../css/antd.min.css" rel="stylesheet"><script src="../js/vue.min.js"></script><script src="../js/antd.min.js"></script><title>Document</title>
</head>
<body><div id="app"><div  style="width: 260px; align-content: center;"><h1>登录框</h1><p>用户名:<a-input v-model="username" placeholder="请输入用户名....."></a-input></p><p>密码:<a-input type="password" v-model="userpwd" placeholder="请输入密码....."></a-input></p><p><a-button type="primary" @click="login()" block>登 录</a-button></p></div></div>
</body>
<script>new Vue({el:"#app",data:{username:"",userpwd:""},methods:{login:function(){//获取用户名和密码var name = this.username;var pwd = this.userpwd;if(name=="admin"&&pwd==123){window.location.href="index.html"}else{this.$message.error("登录失败，用户名或密码不正确")}}}})
</script>
</html>

index.html页面代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="../css/antd.min.css" rel="stylesheet"><script src="../js/vue.min.js"></script><script src="../js/antd.min.js"></script><title>Document</title>
</head>
<body><div id="app"><div style="width: 550px;"><fieldset><legend>添加学生</legend><p><label for="newStudentName">姓名</label><a-input v-model="newstudent.name" id="newStudentName"></a-input></p><p>性别<a-radio-group v-model="newstudent.sex" name="radioGroup"><a-radio value="男">男</a-radio><a-radio value="女">女</a-radio></a-radio-group></p><p><label for="newStudentAge">年龄</label><a-input v-model="newstudent.age" id="newStudentAge"></a-input></p><p><a-button type="primary"  @click="addStudent()" block>添加</a-button></p></fieldset></div><div style="width: 550px;">姓名:<a-input placeholder="请输入姓名" v-model="key_name"></a-input><table border="1" style="width: 550px;"><tr><td>编号</td><td>姓名</td><td>性别</td><td>年龄</td><td>操作</td></tr><tr v-for="(student,index) in findStudent" :key="index"><td>{{index+1}}</td><td>{{student.name}}</td><td>{{student.sex}}</td><td>{{student.age}}</td><td><input type="button" value="删除" @click="deleted(index)"></td></tr></table></div></div>
</body>
<script>new Vue({el:"#app",data:{newstudent:{name:"",sex:"",age:""},students:[{name:"张三",sex:'男',age:20},{name:"小黑",sex:'男',age:20},{name:"小陈",sex:'女',age:21},{name:"小白",sex:'女',age:21},{name:"小张",sex:'男',age:20},{name:"小李",sex:'男',age:22},],key_name:""},methods:{//删除deleted:function(index){if(confirm('确定要删除吗?')){this.students.splice(index,1);}},//添加addStudent:function(){if(this.newstudent.name==0){this.$message.info("姓名不能为空！");return}if(this.newstudent.sex==0){this.$message.info("请选择性别！");return}if(this.newstudent.age==0){this.$message.info("年龄不能为空！");return}this.students.push(this.newstudent);this.newstudent={//清除输入框内容name:"",sex:"",age:""}}},computed:{findStudent:function(){var _this = this;return _this.students.filter(function(val){return  val.name.indexOf(_this.key_name) != -1})}}});
</script>
</html>

Vue 复习考试练习相关推荐

计算机组成原理考试知识点总结,最新2018计算机组成原理期末复习考试知识点复习考点归纳总结总结...
电大计算机组成原理期末复习考试考点归纳总结科学研究和工程技术计算是计算机最早的领域. 信息处理是计算机应用的最广泛的领域. 计算机系统分为硬件和软件两大部分.硬件是实体部件,是看得见摸得着的.软件 ...
考研计算机专业课复习,考研中计算机专业课的复习考试.pdf
考研中计算机专业课的复习考试.pdf 第20卷第1期西昌学院学报·自然科学版 VoL20-№1 of ScienceEdition Mar．．2006 2006年3月 Joumal College' ...
新鲜出炉的一款SpringBoot +Vue的考试系统
一.考试系统简介新鲜出炉的一款SpringBoot +Vue的考试系统,支持多种题型:选择题.多选题.判断题.填空题.综合题以及数学公式.支持在线考试,教师在线批改试卷. 二.项目架构后端技术栈 ...
Springboot+vue在线考试系统源码，前后端分离
Springboot+vue在线考试系统源码开发语言:Java 数据库:Mysql 开发工具:Eclipse 使用技术: 后端:SpringBoot 前端:VUE 和 Element-UI 源码免费 ...
java项目：基于springboot+vue在线考试系统1013
项目描述 springboot+vue在线考试系统: 使用目前较为流行的框架spring boot,前端部分采用了vue,项目的业务流程相对简单,该项目主要功能包括学生管理,教师管理,题库管理,成绩查 ...
电大计算机flash期末考试题,电大（精新编版）开放教育计算机网络专业（专科）《flash动画制作》期末复习考试试题及参考答案--2017年度.doc...
电大(精新编版)开放教育计算机网络专业(专科)<flash动画制作>期末复习考试试题及参考答案--2017年度电大开放教育计算机网络专业(专科)<Flash动画制作>考试试题 ...
电大计算机flash期末考试题,电大（精新编版）开放教育计算机网络专业（专科）《flash动画制作》期末复习考试试题及参考答案__2017年度.doc...
电大(精新编版)开放教育计算机网络专业(专科)<flash动画制作>期末复习考试试题及参考答案__2017年度电大开放教育计算机网络专业(专科)<Flash动画制作>考试试题 ...
Vue复习知识点（理解MVVM模式、Vue实例配置的各选项、Vue的各种内置指令....）
Vue复习知识点一.理解MVVM模式 VVM是一种设计模式,它将应用程序分为三个部分:模型(Model).视图(View)和视图模型(ViewModel).它的主要目的是将应用程序的界面逻辑与业务逻 ...
基于Spring Boot+Vue的考试系统
简介本系统是一个前后端分离的项目,前端使用Vue进行开发,开发工具是WebStorm,后端是SpringBoot进行开发,开发工具是Idea.功能包含用户管理.角色管理.题库管理.试题管理.考试管理 ...

Vue 复习考试练习

Vue 复习考试练习相关推荐

最新文章

热门文章