使用vue创建名称列表案例，增加删除列表内容，根据条件搜索列表信息

最新推荐文章于 2024-05-24 11:30:21 发布

面对疾风ba

最新推荐文章于 2024-05-24 11:30:21 发布

阅读量302

点赞数

分类专栏： vue学习笔记文章标签：列表 vue vue.js

本文链接：https://blog.csdn.net/u011608672/article/details/114002041

版权

vue学习笔记专栏收录该内容

36 篇文章 5 订阅

订阅专栏

使用vue的小案例（添加统计名字，删除名字，搜索名字）：

该案例中使用了数组的一些方法：
添加数组：

push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。

删除数组：

splice()方法向/从数组中添加/删除项目，然后返回被删除的项目。

查询数组：

some()方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

findIndex()方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1

filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

包含数组：

indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。

includes()方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <label for="id">id</label>
            <input type="text" id="id" placeholder="请输入id" v-model="id">
            
            <label for="pp_name">名字</label>
            <input type="text" id="pp_name" placeholder="请输入id" v-model="name">
            <input type="button" value="添加" @click="add">

            <label for="search">搜索</label>
            <input type="text" id="search" placeholder="请输入id" v-model="keywords">
        </div>

        <div>
            <table>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>名字</th></th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in search(keywords)" :key="item.id">
                        <td>{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.time }}</td>
                        <td><a href="###" @click.prevent="del(item.id)">删除</a></td>
                    </tr>
                </tbody>
            </table>
        </div>


    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
               id:'',
               name:'',
               keywords:'',
               list:[
                   {id:1, name:'张三', time:new Date().toLocaleString()},
                   {id:2, name:'李四', time:new Date().toLocaleString()}
               ]
            },
            methods:{
                add(){
                    this.list.push({id:parseInt(this.id), name:this.name, time:new Date().toLocaleString()})
                    this.id = this.name = ''
                },
                del(id){

                    // 第一种方法通过some的方法查找删除
                    // 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) {
                            console.log(item);
                            newList.push(item)
                        }
                    })


                    // 第二种使用filter方法进行查找
                    // filter会创建一个新的数组，新数组检查会包含指定的条件
                    // this.list.filter((item,i) => {
                    //     if (item.name.includes(keywords)){
                    //         // console.log(item);
                    //         newList.push(item)
                    //     }
                    // })
                    return newList

                }
            }
        })
    </script>
    
</body>
</html>