访问本地文件

//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>