<template> <div class="wrapper"> <h2>学生签到系统</h2> <div class="content"> <div class="form-item"> <input type="text" v-model="student.S_id" placeholder="请输入学号"> </div> <div class="form-item"> <input type="text" v-model="student.S_pwd" placeholder="请输入密码"> </div> <div class="form-item"> <a @click.prevent="Login">登录</a > </div> </div> <!-- ... 现有模板代码 ... --> <div v-if="show" class=""> <div class=""> <h3>班级尚未开启签到</h3> <button @click="close">取消</button> </div> </div> </div> </template> <script> import qs from "qs" import axios from "axios"; export default { name: "Login", data(){ return{ //弹窗 show:false, student:{ S_id:null, S_pwd:null, } } }, methods: { close() { this.show = false; // 隐藏弹出窗口 }, Login() { let param = qs.stringify(this.student); axios.post('/xx/students/login', param).then((response) => { //获取当前学生的班级信息并传入sessionStorage,参数为S_class sessionStorage.setItem('classInfo', response.data.data.s_class); //获取当前学生的id信息并传入sessionStorage sessionStorage.setItem('studentId', this.student.S_id); //弹窗 if (response.data.msg === "账号或密码错误"){ this.show = true; } if (response.data.code == 200) { this.$router.push({"path": "/signLog"}) } }).catch((error) => { console.log(error); }); } } } </script> <style scoped> .wrapper > h2{ text-align: center; margin: 40px 0px; } .content{ padding: 8px; } .form-item { margin-bottom: 20px; } .form-item > input{ width: 100%; height: 40px; padding: 4px; outline: none; border: 1px solid rebeccapurple; box-sizing: border-box; } .form-item > a{ display: inline-block; width: 100%; height: 40px; background-color: sandybrown; text-align: center; line-height: 40px; } .form-item > 这段代码要怎么样实现弹窗

要实现弹窗功能，你可以按照以下步骤进行操作：

1. 在 `data` 属性中添加一个名为 `show` 的布尔值，初始值设为 `false`，用于控制弹窗的显示与隐藏。
2. 在模板中，将需要弹窗的内容包裹在一个 `div` 元素中，并添加一个条件渲染指令 `v-if="show"`，用于控制该 `div` 元素的显示与隐藏。
3. 在弹窗内容的底部添加一个取消按钮，绑定点击事件 `@click="close"`，在 `methods` 中定义 `close` 方法用于关闭弹窗。
4. 在登录方法 `Login()` 中，在账号或密码错误的情况下将 `show` 设置为 `true`，显示弹窗。

下面是修改后的代码示例：

<template>
  <div class="wrapper">
    <h2>学生签到系统</h2>

    <div class="content">
      <div class="form-item">
        <input type="text" v-model="student.S_id" placeholder="请输入学号">
      </div>
      <div class="form-item">
        <input type="text" v-model="student.S_pwd" placeholder="请输入密码">
      </div>

      <div class="form-item">
        <a @click.prevent="Login">登录</a >
      </div>

    </div>

    <!-- ... 现有模板代码 ... -->
    <div v-if="show" class="">
      <div class="">
        <h3>班级尚未开启签到</h3>
        <button @click="close">取消</button>
      </div>
    </div>

  </div>

</template>

<script>
import qs from "qs"
import axios from "axios";
export default {
  name: "Login",
  data(){
    return{
      //弹窗
      show:false,
      
      student:{
        S_id:null,
        S_pwd:null,
      }
    }
  },

  methods: {

    close() {
      this.show = false; // 隐藏弹出窗口
    },

    Login() {
      let param = qs.stringify(this.student);
      axios.post('/xx/students/login', param).then((response) => {
        //获取当前学生的班级信息并传入sessionStorage,参数为S_class
        sessionStorage.setItem('classInfo', response.data.data.s_class);

        //获取当前学生的id信息并传入sessionStorage
        sessionStorage.setItem('studentId', this.student.S_id);
        //弹窗
        if (response.data.msg === "账号或密码错误"){
          this.show = true;
        }
        if (response.data.code == 200) {
          this.$router.push({"path": "/signLog"})
        }
      }).catch((error) => {
        console.log(error);
      });
    }
  }
}
</script>

<style scoped>
  .wrapper > h2{
    text-align: center;
    margin: 40px 0px;
  }

  .content{
    padding: 8px;
  }

  .form-item {
    margin-bottom: 20px;
  }

  .form-item > input{
    width: 100%;
    height: 40px;
    padding: 4px;
    outline: none;
    border: 1px solid rebeccapurple;
    box-sizing: border-box;
  }

  .form-item > a{
    display: inline-block;
    width: 100%;
    height: 40px;
    background-color: sandybrown;
    text-align: center;
    line-height: 40px;
  }
</style>

这样，当登录接口返回账号或密码错误时，弹窗将会显示出来。在点击取消按钮时，弹窗会被隐藏。