vue实现模糊查询

筱闯~

已于 2023-02-17 07:42:06 修改

阅读量857

点赞数 2

文章标签： vue.js javascript 前端 Powered by 金山文档

于 2023-02-14 15:13:53 首次发布

本文链接：https://blog.csdn.net/m0_64544033/article/details/129027340

版权

方法一:利用indexOf来实现

代码块如下

<!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">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="keyword"><button @click="seach">搜索</button>
        <table>
            <thead>
                <tr>
                    <td>ID</td>
                    <td>姓名</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in list" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            keyword:'',
            list:[
                {id:1,name:'张三'},
                {id:2,name:'李四'},
                {id:3,name:'王五'},
                {id:4,name:'赵六'},
                {id:5,name:'王七'},
                {id:6,name:'苏八'},
                {id:7,name:'阿九'},
                {id:8,name:'张二'},
            ],
            arr:[]
        },
        methods: {
            seach() {
                const aa = this.list.filter(i=>{
                    return i.name.indexOf(this.keyword) != -1
                })
                console.log(aa);
                this.list = aa
            },
        },
    })
</script>
</html>

方法二: 利用includes

 methods: {
            seach() {
                const aa = this.list.filter((item) => {
                    return item.name.includes(this.keyword)
                })
                this.list = aa
            },
        },