首页技术文章正文

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

更新时间:2022-11-03 来源:黑马程序员 浏览量:

IT培训班

  在进行了前面的内容学习之后,我们就可以利用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)在页面中单击“添加学生”按钮和“删除学生”按钮,观察运行结果。

分享到:
在线咨询 我要报名
和我们在线交谈!