Vue几行代码实现搜索功能

最新推荐文章于 2024-10-07 17:53:56 发布

忍者1

最新推荐文章于 2024-10-07 17:53:56 发布

阅读量254

点赞数

分类专栏：前端高级文章标签： vue

原文链接：http://www.mark-to-win.com/tutorial/50785.html

版权

前端高级专栏收录该内容

157 篇文章

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <title>search</title>
    <script src="vue.js"></script>
</head>

<body>

    <div id="app">
        <input v-model='search' />
        <ul v-for="(item,index) in searchData " :key='index'>
            <li>{{item.num}}</li>
        </ul>
    </div>


    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                search: '',
                
                list: [{
                    num:1
                }, {
                    num:2
                }, {
                    num:3
                }, {
                    num:4
                }]
            },
            computed: {
                searchData: function () {
                    var search = this.search;
                    if (search) {
                        return this.list.filter(function (item) {
                            return Object.keys(item).some(function (key) {
                                return String(item[key]).toLowerCase().indexOf(search) >-1