vue考核点示例(仅供参考)

vue考核示例

一、环境

考试压缩包提供：antd.min.css、antd.min.js、vue.min.js。

二、编码需求：

1、登录页面(20分)

需要完成账号密码登录，并且需要有账号密码判断，只有账号输入【admin】密码输入【123456】的时候可以登录成功，否则显示【账号或密码错误】。

2、数据操作页面(75分)

需要完成table表的增删查操作

1）、通过【table】与【a-input】标签完成添加信息的模块(15分，少一部分扣3分)

2）、通过【a-input】与【computed】完成中间搜索框的模块样式与操作(15分，样式5，搜索10分)

关键字【_this】【filter】【indexOf】

3）、通过【table】与【v-for】完成表格的信息展示(15分)

关键字【item,index】

4）、添加功能(20分，绑定函数5分、非空判断5分，非空提示3分，添加7分)

5）、删除功能(10分，按钮样式3分，删除提示3分，功能4分)

已删除

3、变量与编码规范(5分)

三、提交

按照【班级_学号_姓名】的方式压缩【项目】，需要压缩内容包括：

以及编码文件：

完整编码示例

直接导入即可使用：

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"><title>Document</title><link rel="stylesheet" href="css/antd.min.css">
</head>
<body><div id="app"><fieldset style="text-align: center;"><legend>登录框</legend><table align="center"><tr><td>账号：</td><td><a-input type="text" v-model="userName" placeholder="请输入账号"/></td></tr><tr><td>密码：</td><td><a-input type="password" v-model="passWord" placeholder="请输入密码"/></td></tr><tr><td colspan="2"><a-button type="primary" v-on:click="submit">登录</a-button></td></tr></table></fieldset></div><script src="js/vue.min.js"></script><script src="js/antd.min.js"></script><script>new Vue({el:"#app",data:{userName:"",passWord:""},computerd:{},methods:{submit:function(){if(this.userName=="admin"&&this.passWord=="123456"){window.location.href="index.html";}else{this.$message.error("账号或密码错误");}}}});</script>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/antd.min.css">
</head><body><!-- 视图层 --><div id="app"><table align="center"><tr><td>编号: </td><td><a-input type="text" placeholder="请输入编号" v-model="id" /></td><td>姓名: </td><td><a-input type="text" placeholder="请输入姓名" v-model="name" /></td></tr><tr><td>价格:</td><td><a-input type="text" placeholder="请输入薪水"  v-model="price" suffix="元"/></td><td>性别:</td><td><a-radio-group v-model="sex"><a-radio :value="1">男</a-radio><a-radio :value="0">女</a-radio></a-radio-group></td></tr><tr><td colspan="4"><a-button block type="primary" v-on:click="addInfo">添加信息</a-button></td></tr></table> <hr/><p><a-input type="text" placeholder="请输入搜索内容" v-model="SelectKey" /></p><hr/><table style="width: 100%;text-align: center;" border="1"><tr><th> 编号 </th><th> 姓名 </th><th> 薪水 </th><th> 性别 </th><th> 操作 </th></tr><tr v-for="(item,index) in newlist"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td>{{item.sex==0?"女":"男"}}</td><td><a-button type="primary" v-on:click="del(index)">删除</a-button></td></tr></table></div><script src="js/vue.min.js"></script><script src="js/antd.min.js"></script><script>new Vue({el: "#app",data: {list: [{id: 1,name: "王语嫣",price: 12000,sex: 0}, {id: 2,name: "小龙女",price: 9000,sex: 0}, {id: 3,name: "紫霞",price: 8000,sex: 0}, {id: 4,name: "赵灵儿",price: 5000,sex: 0}, {id: 5,name: "杨过",price: 15000,sex: 1}],SelectKey: "",id: 0,name: "",price: 0,sex: 1},computed: {newlist: function() {var _this = this;return _this.list.filter(function(o) {return o.name.indexOf(_this.SelectKey) != -1;});}},methods: {addInfo: function() {if(this.id==0){this.$message.info('编号不正确');return;}if(this.name==0){this.$message.info('请输入姓名');return;}if(this.price==0){this.$message.info('请输入工资');return;}this.list.push({id: this.id,name: this.name,price: this.price,sex: this.sex});},del: function(o) {if (confirm('是否删除此行?')) {this.list.splice(o, 1);}}}})</script>
</body></html>