在Web開發中，添加學生列表是一個常見的需求。Vue作為一款流行的前端框架，提供了很多便捷的操作和良好的開發體驗。接下來我們將學習如何使用Vue來添加學生列表。

首先，我們需要定義學生列表數據。在Vue中，可以使用data屬性來綁定數據。

data() {
return {
students: [
{ id: 1, name: '張三', age: 18 },
{ id: 2, name: '李四', age: 19 },
{ id: 3, name: '王五', age: 20 }
]
}
}

上面代碼中，我們定義了一個名為students的數組，其中每個元素表示一個學生。每個學生都有id、name和age三個屬性。

接下來，我們需要在頁面上展示學生列表。在Vue中，可以使用v-for指令來循環渲染元素。

<ul>
<li v-for="student in students" :key="student.id">
{{ student.name }}（{{ student.age }}歲）
</li>
</ul>

上面代碼中，我們使用v-for指令遍歷students數組，為每個學生生成一個li元素。使用:key指令指定每個元素的唯一標識，這樣Vue可以更好地跟蹤數據變化。

現在我們已經可以展示學生列表了，但是怎樣實現添加新學生的功能呢？

首先，我們需要添加一個表單，讓用戶輸入新學生的信息。

<form @submit.prevent="addStudent">
<label>姓名：
<input v-model="newStudent.name" type="text">
</label>
<label>年齡：
<input v-model.number="newStudent.age" type="number">
</label>
<button type="submit">添加</button>
</form>

上面代碼中，我們使用v-model指令雙向綁定表單元素和newStudent對象的屬性。v-model.number指令將年齡值轉換成數字類型。

接下來，我們需要在addStudent方法中添加新學生的信息。

methods: {
addStudent() {
const student = {
id: this.students.length + 1,
name: this.newStudent.name,
age: this.newStudent.age
}
this.students.push(student)
this.newStudent.name = ''
this.newStudent.age = null
}
}

上面代碼中，我們創建一個名為student的對象，根據學生數量為其分配一個唯一的id編號，然后將姓名和年齡設置為新學生輸入的值。使用this.students.push方法將新學生添加到學生列表中，然后清空表單輸入框。

現在我們已經完成了添加學生列表的功能。整個實現過程都非常簡單，但Vue提供的數據綁定和指令系統大大提高了開發效率和項目可維護性。