更新時間:2022-11-03 來源:黑馬程序員 瀏覽量:
在進行了前面的內(nèi)容學習之后,我們就可以利用Vue開發(fā)一個簡單的學生列表頁面,來實現(xiàn)學生信息的添加和刪除了,具體步驟如例2-17所示。
【例2-17】
(1)創(chuàng)建C:\vue\chapter02\demo17.html文件,具體代碼如下:
<div id="app"> <button @click="add">添加學生</button> <button @click="del">刪除學生</button> <table border="1" width="50%" style="border-collapse: collapse"> <tr> <th>班級</th> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> <tr align="center" v-for="item in students"> <td>{{item.grade}}</td> <td>{{item.name}}</td> <td>{{item.gender}}</td> <td>{{item.age}}</td> </tr> </table> </div>
上述代碼是學生信息列表的結構,其中,第2、3行代碼定義了操作學生信息的按鈕,分別是“添加學生”和“刪除學”;第11行代碼使用v-for進行了列表渲染。
(2)在demo17.html文件編寫JavaScript代碼,具體代碼如下:
var vm = new Vue({ el: 'app#', data: { students: [] }, methods: { // 添加學生信息 add () { var student = {grade: '1', name: '張三', gender: '男', age: 25} this.students.push(student) }, // 刪除學生信息 del () { this.students.pop() } } })
上述代碼中,學生信息是一個數(shù)組,第8~15行在methods中分別定義了add和del事件處理方法,當單擊“添加學生”按鈕時,會向?qū)W生列表中添加一條學生信息,當單擊“刪除學生”按鈕時,會從學生列表中刪除一條學生信息。
(3)在瀏覽器中打開demo17.html文件,觀察運行結果。
(4)在頁面中單擊“添加學生”按鈕和“刪除學生”按鈕,觀察運行結果。