//vscode运行vue项目 必须要安装Live Server 插件且左侧项目只能有当前项目
<!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>汤阴县育才中学</title>
<style>
#app {
padding: 2%;
}
.conter {
margin-top: 10px;
}
.test {
width: 100%;
border: 1px solid #e8eaec;
font-size: 14px;
color: #515a6e;
font-family: Microsoft YaHei;
}
#input {
width: calc(100% - 60px);
border: 1px solid #dcdee2;
border-radius: 4px;
margin-top: 10px;
}
.btn {
border: 1px solid #dcdee2;
cursor: pointer;
height: 30px;
line-height: 24px;
width: 60px;
font-size: 14px;
border-radius: 4px;
}
.btn:hover {
background-color: #2d8cf0;
color: #fff;
border: 1px solid #2d8cf0;
}
.test_title {
height: 48px;
}
.item {
height: 36px;
}
#sid {
width: calc(100% - 60px);
height: 28px;
margin-top: 10px;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #f0f0f0;
}
tr {
height: 40px;
}
th,
td {
text-align: center;
vertical-align: middle;
}
table,
tr,
td,
th {
border: 1px solid #dcdee2;
}
</style>
</head>
<body>
<div id="app" class="app">
<div class="header">
年级：
<select
id="sid"
v-model="gradeid"
placeholder="请选择年级"
@change="select()"
>
<option
v-for="(item, index) in grade_list"
:key="index"
:value="item.name"
>
{{ item.name }}
</option>
</select>
<br />
班级：
<select
id="sid"
v-model="classid"
placeholder="请选择班级"
@change="select()"
>
<option
v-for="(item, index) in class_arr"
:key="index"
:value="item.name"
>
{{ item.name }}
</option>
</select>
<br />
姓名：
<input
placeholder="请输入学生姓名"
style="height: 28px"
v-model="studentname"
type="text"
id="input"
/>
</div>
<div class="conter">
<table class="test" border="1">
<tr class="test_title">
<th style="width: 60px">序号</th>
<th>年级/班级</th>
<th>学生姓名</th>
<th>登录账号/密码</th>
</tr>
<tr class="item" v-for="(item, idx) in newlist" :key="idx">
<td>{{idx+1}}</td>
<td>{{item.grade}}-{{item.class}}</td>
<td>{{item.name}}</td>
<td>{{item.loginname}}<br />{{item.loginpwd}}</td>
</tr>
</table>
</div>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
studentname: "",
list: [],
lever_arr: [
{ leverid: 1, name: "小学" },
{ leverid: 2, name: "初中" },
{ leverid: 3, name: "高中" }
],
grade_list: [
{ lever: 1, gradeid: 1, name: "一年级" },
{ lever: 1, gradeid: 2, name: "二年级" },
{ lever: 1, gradeid: 3, name: "三年级" },
{ lever: 1, gradeid: 4, name: "四年级" },
{ lever: 1, gradeid: 5, name: "五年级" },
{ lever: 1, gradeid: 6, name: "六年级" },
{ lever: 2, gradeid: 7, name: "七年级" },
{ lever: 2, gradeid: 8, name: "八年级" },
{ lever: 2, gradeid: 9, name: "九年级" },
{ lever: 3, gradeid: 10, name: "高一" },
{ lever: 3, gradeid: 11, name: "高二" },
{ lever: 3, gradeid: 12, name: "高三" }
],
class_arr: [
{ classid: 1, name: "1班" },
{ classid: 2, name: "2班" },
{ classid: 3, name: "3班" },
{ classid: 4, name: "4班" },
{ classid: 5, name: "5班" },
{ classid: 6, name: "6班" },
{ classid: 7, name: "7班" },
{ classid: 8, name: "8班" },
{ classid: 9, name: "9班" },
{ classid: 10, name: "10班" },
{ classid: 11, name: "11班" },
{ classid: 12, name: "12班" },
{ classid: 13, name: "13班" },
{ classid: 14, name: "14班" }
],
leverid: "小学",
gradeid: "一年级",
classid: "1班"
},
computed: {
newlist: function () {
return this.list.filter(item => {
return (
item.grade === this.gradeid &&
item.class === this.classid &&
item.name.indexOf(this.studentname) !== -1
);
});
}
},
watch: {},
created() {
this.init();
},
mounted() {},
methods: {
init() {
//访问本地文件
var xhr = new XMLHttpRequest();
xhr.open("get", `./export.json`, true);
xhr.send();
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
let res = JSON.parse(xhr.responseText);
this.list = res;
}
};
}
}
});
</script>
</html>
浙公网安备 33010602011771号