Web前端培訓：學生列表案例

　　在進行了前面的內容學習之后，我們就可以利用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事件處理方法，當單擊“添加學生”按鈕時，會向學生列表中添加一條學生信息，當單擊“刪除學生”按鈕時，會從學生列表中刪除一條學生信息。

　　(3)在瀏覽器中打開demo17.html文件，觀察運行結果。

　　(4)在頁面中單擊“添加學生”按鈕和“刪除學生”按鈕，觀察運行結果。