用vue实现学生列表添加与删除
时间: 2023-12-17 21:04:31 浏览: 61
好的,我可以给您提供一个简单的示例代码,您可以根据自己的需求进行修改:
```vue
<template>
<div>
<h2>学生列表</h2>
<div>
<input type="text" v-model="newStudent" placeholder="请输入学生姓名" />
<button @click="addStudent">添加</button>
</div>
<ul>
<li v-for="(student, index) in students" :key="index">
{{ student }}
<button @click="removeStudent(index)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
students: [],
newStudent: ""
};
},
methods: {
addStudent() {
if (this.newStudent) {
this.students.push(this.newStudent);
this.newStudent = "";
}
},
removeStudent(index) {
this.students.splice(index, 1);
}
}
};
</script>
```
这个示例代码实现了一个简单的学生列表,可以添加和删除学生。在 `data` 中定义了 `students` 数组和 `newStudent` 变量,分别用于存储学生列表和添加学生的输入框中的内容。在 `methods` 中定义了 `addStudent` 和 `removeStudent` 方法,分别用于添加和删除学生。在模板中使用了 `v-model` 将输入框中的内容绑定到 `newStudent` 变量上,使用了 `v-for` 遍历 `students` 数组并显示每个学生的名字和删除按钮。