【vue3】学生管理案例

ོ栖落

已于 2023-06-25 12:17:09 修改

阅读量276

点赞数

分类专栏：案例文章标签： vue.js

于 2023-06-25 12:04:26 首次发布

本文链接：https://blog.csdn.net/qq_63806300/article/details/131368400

版权

案例专栏收录该内容

10 篇文章 0 订阅

订阅专栏

此示例展示了如何使用Vue.js进行学生列表的管理，包括通过v-model双向绑定数据来实现学生信息的输入、新增、删除和搜索功能。添加新学生时，会创建一个新的对象并将其添加到列表中；删除学生时，根据索引从列表中移除；搜索学生则根据关键词过滤列表。

摘要由CSDN通过智能技术生成

此案例可以分为4个部分：

渲染学生列表
新增学生
删除学生
搜索学生

涉及的知识点主要为v-model双向绑定数据。

页面：

<div id="main">
    <table>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>新增时间</td>
            <td>操作</td>
        </tr>
        <tr v-for="(item,i) in search(keywords)":key="i">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.time}}</td>
            <td><a @click="del(i)">删除</a></td>
        </tr>
        <tr>
            <td><input type="text" placeholder="请输入学号" v-model="id"/></td>
            <td><input type="text" placeholder="请输入姓名" v-model="name"/></td>
            <td><input type="button" value="新增" @click="add"/></td>
            <td><input type="text" placeholder="搜索学生姓名" v-model="keywords"/></td>
        </tr>
    </table>
</div>

新增学生：

add() {
    var stu = {
        id: this.id,
        name: this.name,
        time: new Date()
    }
    this.list.push(stu)
    this.id = this.name = ''
}

删除学生：

del(i) {
    this.list.splice(i,1)
}

搜索学生：

search(keywords) {
    var newList = []
    this.list.forEach(item=>{
        if(item.name.indexOf(keywords)!=-1) {
            newList.push(item)
        }
    })
    return newList
}

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        
  </head>
  <body>

    <div id="main">
        <table>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>新增时间</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item,i) in search(keywords)":key="i">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.time}}</td>
                <td><a @click="del(i)">删除</a></td>
            </tr>
            <tr>
                <td><input type="text" placeholder="请输入学号" v-model="id"/></td>
                <td><input type="text" placeholder="请输入姓名" v-model="name"/></td>
                <td><input type="button" value="新增" @click="add"/></td>
                <td><input type="text" placeholder="搜索学生姓名" v-model="keywords"/></td>
            </tr>
        </table>
    </div>

    <script>
    const { createApp } = Vue
    createApp({
        data() {
            return {
                list: [{
                        id: 1,
                        name: '小明',
                        time: new Date()
                    },
                    {
                        id: 2,
                        name: '大黄',
                        time: new Date()
                    }
                ],
                keywords: '',
                id: '',
                name: '',
            }
        },
        methods: {
            search(keywords) {
                var newList = []
                this.list.forEach(item=>{
                    if(item.name.indexOf(keywords)!=-1) {
                        newList.push(item)
                    }
                })
                return newList
            },
            add() {
                var stu = {
                    id: this.id,
                    name: this.name,
                    time: new Date()
                }
                this.list.push(stu)
                this.id = this.name = ''
            },
            del(i) {
                this.list.splice(i,1)
            }
        }
    }).mount('#main')
    </script>
  </body>
</html>