Web前端培训：学生列表案例

　　在进行了前面的内容学习之后，我们就可以利用Vue开发一个简单的学生列表页面，来实现学生信息的添加和删除了，具体步骤如例2-17所示。

　　【例2-17】

　　(1)创建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()
        }
    }
})

　　上述代码中，学生信息是一个数组，第8～15行在methods中分别定义了add和del事件处理方法，当单击“添加学生”按钮时，会向学生列表中添加一条学生信息，当单击“删除学生”按钮时，会从学生列表中删除一条学生信息。

　　(3)在浏览器中打开demo17.html文件，观察运行结果。

　　(4)在页面中单击“添加学生”按钮和“删除学生”按钮，观察运行结果。