Vue几行代码实现搜索功能 

<!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
更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119328653
posted @ 2022-05-23 21:13  忘川信使  阅读(348)  评论(0)  编辑  收藏  举报