javascript里面2种方法实现模糊查询数组和对象

Author：逸云先生
发布时间：December 9, 2020
5788 views
One comment
1100 words
Categories： Web开发 Javascript Vue

今天在开发种要用到模糊查询，用两种方法实现了，记录一下。
</div>

## 第一种：

#### html部分：

```
 <div id="app">
        <input type="text" v-model='sreach'>
        <div v-for="item in find">
            {{item}}
        </div>
    </div>
```

#### js部分：

```
var vm = new Vue({
        el: '#app',
        data: {
            sreach:'',
            list: [ 'html', 'css','js' ],
        },
        computed: {
            find() {
                return this.list.filter(item=> item.indexOf(this.sreach)>-1);
            },
        },
    })
```

## 第二种：

#### html部分：

```
 <div id="app">
        <input type="sreach" v-model="sreach" />
        <ul>
            <li class="search-item border-bottom" 
                v-for="item of search" 
                :key="item.name">
                 {{item.name}}
             </li>
        </ul>
    </div>
```

#### js部分：

```
 var vm = new Vue({
        el: "#app",
        data: {
            list: [
                { id: 1, name: "衣服" },
                { id: 2, name: "鞋子" },
                { id: 3, name: "裤子" },
                { id: 4, name: "袜子" },
            ],
            sreach: ""
        },
        computed: {
            search() {
                return this.list.filter((item) => item.name.includes(this.sreach));
            }
        },
    })
```

Last modification：September 12, 2023