Vue几行代码实现搜索功能

2022-05-24 18:44:53 浏览数 (1)

代码语言:javascript复制
<!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
123456789101112131415161718192021222324252627282930313233343536373839404142

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119328653

0 人点赞