Web前端培訓(xùn)：學(xué)生列表案例

　　在進(jìn)行了前面的內(nèi)容學(xué)習(xí)之后，我們就可以利用Vue開發(fā)一個(gè)簡(jiǎn)單的學(xué)生列表頁(yè)面，來(lái)實(shí)現(xiàn)學(xué)生信息的添加和刪除了，具體步驟如例2-17所示。

　　【例2-17】

　　(1)創(chuàng)建C:\vue\chapter02\demo17.html文件，具體代碼如下：

<div id="app">
    <button @click="add">添加學(xué)生</button>
    <button @click="del">刪除學(xué)生</button>
    <table border="1" width="50%" style="border-collapse: collapse">
        <tr>
            <th>班級(jí)</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>

　　上述代碼是學(xué)生信息列表的結(jié)構(gòu)，其中，第2、3行代碼定義了操作學(xué)生信息的按鈕，分別是“添加學(xué)生”和“刪除學(xué)”;第11行代碼使用v-for進(jìn)行了列表渲染。

　　(2)在demo17.html文件編寫JavaScript代碼，具體代碼如下：

var vm = new Vue({
    el: 'app#',
    data: {
        students: []
    },
    methods: {
        // 添加學(xué)生信息
        add () {
            var student = {grade: '1', name: '張三', gender: '男', age: 25}
            this.students.push(student)
        },
        // 刪除學(xué)生信息
        del () {
            this.students.pop()
        }
    }
})

　　上述代碼中，學(xué)生信息是一個(gè)數(shù)組，第8～15行在methods中分別定義了add和del事件處理方法，當(dāng)單擊“添加學(xué)生”按鈕時(shí)，會(huì)向?qū)W生列表中添加一條學(xué)生信息，當(dāng)單擊“刪除學(xué)生”按鈕時(shí)，會(huì)從學(xué)生列表中刪除一條學(xué)生信息。

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

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