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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-06-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
