前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue几行代码实现搜索功能

Vue几行代码实现搜索功能

作者头像
马克社区
发布2022-05-24 18:44:53
4910
发布2022-05-24 18:44:53
举报
文章被收录于专栏:高端IT高端IT
代码语言: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

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档