v-model实现添加学生
时间: 2023-09-04 10:01:34 浏览: 49
v-model是Vue.js框架提供的指令之一,用于实现数据绑定。在添加学生的场景中,v-model可以方便地将用户输入的数据与Vue实例中的数据进行双向绑定,从而实现添加学生的功能。
首先,在Vue实例中定义一个学生对象,包含学生的姓名、年龄等属性。通过v-model指令,将用户输入的值实时绑定到该学生对象的对应属性上。
接着,在模板中创建一个表单,包含学生的姓名和年龄输入框,利用v-model指令将输入框与Vue实例中的学生对象属性进行双向绑定。用户在输入框中输入内容时,Vue实例中的学生对象会自动更新。
最后,点击添加按钮时,调用Vue实例中的添加学生方法,将学生对象添加到学生列表中。
下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Add Student using v-model</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form>
<label>姓名:</label>
<input type="text" v-model="student.name">
<br>
<label>年龄:</label>
<input type="number" v-model="student.age">
<br>
<button @click="addStudent">添加学生</button>
</form>
<ul>
<li v-for="student in students">
{{ student.name }} - {{ student.age }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
student: {
name: '',
age: ''
},
students: []
},
methods: {
addStudent: function() {
this.students.push(this.student);
this.student = { name: '', age: '' };
}
}
});
</script>
</body>
</html>
```
在上述示例中,通过v-model将姓名输入框与student.name属性绑定,将年龄输入框与student.age属性绑定。点击添加学生按钮时,调用addStudent方法,将当前输入的学生对象添加到students数组中,并清空输入框。
通过v-model和Vue的数据双向绑定机制,可以实现添加学生的功能,使用户输入的数据能够实时反映在界面上,并将数据保存到Vue实例的数据模型中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<template> 学生签到系统 <input type="text" v-model="student.S_id" placeholder="请输入学号"> <input type="text" v-model="student.S_pwd" placeholder="请输入密码"> 登录 班级尚未开启签到 <button @click="close">取消</button> </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 > 这段代码要怎么样实现弹窗
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)