Vue列表的添加、删除和搜索

最新推荐文章于 2024-04-18 14:32:33 发布

原创最新推荐文章于 2024-04-18 14:32:33 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#列表 #vue

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用Vue.js框架来实现列表数据的动态添加、删除功能，并探讨了如何集成搜索过滤功能，提升用户体验。通过实例代码，展示了Vue组件的灵活性和强大性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="keywords" content="">
    <title>首页</title>
    <link rel="shortcut icon" href="apple-icon-57x57.png" type="img/x-icon" />
    <link rel="stylesheet" href="./css/bootstrap-3.3.7.css">
    <style>

    </style>
</head>

<body>
    <main id="app" v-cloak>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label>
                    Id:
                    <input type="text" class="form-control" v-model="id">
                </label>

                <label>
                    Name:
                    <input type="text" class="form-control" v-model="name">
                </label>
                
                <input type="button" value="添加" class="btn btn-primary" @click="add()">

                <label>
                    搜索名称关键字：
                    <input type="text" class="form-control" v-model="keywords">
                </label>
            </div>
        </div>

        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
               <!-- <tr v-for="item in list" :key="item.id">  -->
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td v-text="item.name"></td>
                    <td>{{ item.ctime }}</td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>

    </main>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            keywords: '', // 搜索的关键字
            list: [{
                    id: 1,
                    name: '奔驰',
                    ctime: new Date()
                },
                {
                    id: 2,
                    name: '宝马',
                    ctime: new Date()
                }
            ]
        },

        methods: {
            add() {
                var car = {
                    id: this.id,
                    name: this.name,
                    ctime: this.ctime
                };
                this.list.push(car);
                this.id = this.name = ''
            },
            
            del(id) {
                //方法一
                // this.list.some((item,i)=>{
                //     if(item.id==id){
                //         this.list.splice(i,1)
                //         return true;
                //     }
                // })

               //方法二
                var index = this.list.findIndex((item => {
                    if (item.id == id) {
                        return true
                    }
                }))
                this.list.splice(index, 1)
            },
            search(keywords) {
                //方法一
                // var newList=[];
                // this.list.forEach(item=>{
                //     if(item.name.indexOf(keywords)!=-1){
                //         newList.push(item)
                //     }
                // })
                // return newList;
                
                //方法二
                return this.list.filter(item => {
                    if (item.name.includes(keywords)) {
                        return item;
                    }
                })
            }
        },
    })
</script>
</html>