<!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

Vue几行代码实现搜索功能的更多相关文章

  1. Vue 3-150行代码实现新国标红绿灯效果案例

    昨天刷视频,都是关于新国标红绿灯的,看大家议论纷纷,下班就用150行代码通过Vue组件实践红绿模拟演示,视频也跟大家展示过了.今天接着更新图文版本,大家跟着优雅哥通过该案例实操模拟一下. 不过新国标红 ...

  2. Vue下简单分页及搜索功能

    最近利用Vue和element ui仿写了个小页面,记一哈分页和搜索功能的简单实现. 首页   emmmm..... 搜索框输入..... 搜索完成 数据是直接写在这里面的: cardPhoto:[ ...

  3. TFS2017代码搜索功能

    当团队或者公司的研发中心的代码库扩展到了一定程度,在代码库中查找一些需要的代码会变的比较困难.比如敏捷模式下的项目小组希望能够找到并重用其他小组开发的一些基础性的功能代码,我们通常需要去找当事人去询问 ...

  4. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  5. vue自动完成搜索功能的数据请求处理

    在现在的互联网世界里,自动完成的搜索功能是一个很常见的功能.比如百度.搜狗.360搜索 ... 功能描述一下大概是这个样子的:有一个搜索框,用户在里面输入要查询的条件,系统会“智能”判断用户输完了,然 ...

  6. vue 使用watch监听实现类似百度搜索功能

    watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...

  7. asp.net导出excel-一行代码实现excel、xml、pdf、word、html、csv等7种格式文件导出功能而且美观-SNF快速开发平台

    分享: 腾讯微博  新浪微博   搜狐微博   网易微博  腾讯朋友  百度贴吧  豆瓣   QQ好友  人人网 作者:王春天  原文地址:http://www.cnblogs.com/spring_ ...

  8. 20 行代码极速为 App 加上聊天功能

    现在很多 App 都需要集成 IM 功能,今天就为大家分享一下集成 IM 基本功能的步骤.本文内容以 JMessage 为例.极光 IM ( JMessage ) = 极光推送 ( JPush ) + ...

  9. 50行代码实现python计算器主要功能

    实现功能:计算带有括号和四则运算的式子   3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 基本思路:使用正则表达式提取出每一层 ...

随机推荐

  1. Lumia1520 手机刷 Windows10 arm双系统

    注意问题 升级到Windows 10 Mobile 的需重新刷回WP8.1,否则解锁会失败 部分手机刷机win10arm后出现屏幕卡死现象,目前除了换屏或重新焊接暂无其他解决方案,请谨慎刷机(当然如果 ...

  2. vue预渲染及其cdn配置

    VUE SEO方案一 - 预渲染及其cdn配置 项目接入VUE这样的框架后,看起来真是太漂亮了,奈何与MCV框架比起来,单页应用程序却满足不了SEO的业务需求,首屏渲染时间也是个问题.总不能白学VUE ...

  3. vue3 - 事件处理之事件修饰符

    内容取自>> <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- ...

  4. 代码源 BFS练习1

    BFS练习1 http://oj.daimayuan.top/course/11/problem/147 题目 思路 四个方向进行BFS 注意:此题读写量大,cin会被卡 代码 #include &l ...

  5. zookeeper篇-zookeeper客户端和服务端的基础命令

    点赞再看,养成习惯,微信搜索「小大白日志」关注这个搬砖人. 文章不定期同步公众号,还有各种一线大厂面试原题.我的学习系列笔记. 前提:我把zookeepee安装在了服务器/usr/local/java ...

  6. python数据处理matplotlib入门(2)-利用随机函数生成变化图形

    综合前述的类.函数.matplotlib等,完成一个随机移动的过程(注意要确定移动的次数,比如10万次),每次行走都完全是随机的,没有明确的方向,结果是由一系列随机决策确定的,最后显示出每次移动的位置 ...

  7. 简单易懂的 Go 泛型使用和实现原理介绍

    原文:A gentle introduction to generics in Go by Dominik Braun 万俊峰Kevin:我看了觉得文章非常简单易懂,就征求了作者同意,翻译出来给大家分 ...

  8. 论文解读（SAGPool）《Self-Attention Graph Pooling》

    论文信息 论文标题:Self-Attention Graph Pooling论文作者:Junhyun Lee, Inyeop Lee, Jaewoo Kang论文来源:2019, ICML论文地址:d ...

  9. 第一个MVC程序

    配置版 添加web的支持! 确定导入了SpringMVC 的依赖! 配置web.xml , 注册DispatcherServlet <?xml version="1.0" e ...

  10. Mac 手动安装 bee工具

    前因: 1.go升级到1.16以后,bee官网给的安装方法(go get XXX)不好使,需要指定version. 2.指定 go get XXX@v2.0.0 可以下载,但是bee工具还是用不了:c ...