<!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. 安卓记账本开发学习day3

    今天发现了新的错误 首先是AS警告杀毒系统对编译运行有影响,我目前只开了火绒,所以只需要在火绒里将SDK文件夹设置为信任即可 第二个错是在编译测试运行的时候,虚拟机能够正常打开,也launch suc ...

  2. vue3 监听路由($route)变化

      setup() {      // ...   },   watch: {     $route(m, n) {       console.log('mm', m)       console. ...

  3. 2021-ACM-ICPC-济南站 K Search For Mafuyu 【树的遍历与回溯，dfs, 邻接表】

    PAT 题目详情 (pintia.cn) 题目 题意描述 n个房间, 有n-1个通道, kanade初始在1,Mafuyu 位置未知,求K到M的最小期望,也就是到每个地方的平均值,注意的是这里的求法, ...

  4. MDL锁

    mdl锁的主要作用是用来维护表元数据的一致性.在表上有活动事务的时候,不可以对表元数据进行修改操作. 如果没有MDL锁的保护,那么session2可以直接执行,并导致session1出错. MDL锁是 ...

  5. JavaScript基础第03天笔记

    JavaScript基础第03天笔记 1 - 循环 1.1 for循环 语法结构 for(初始化变量; 条件表达式; 操作表达式 ){ //循环体 } 名称 作用 初始化变量 通常被用于初始化一个计数 ...

  6. mouseenter 和 mouseover 的区别

    当鼠标移动到元素上时就会触发mouseenter事件 类似mouseover,它们两者之间的差别是 mouseover鼠标经过自身盒子会触发,经过子盒子还会触发.mouseenter只会经过自身盒子触 ...

  7. 程序员延寿指南「GitHub 热点速览 v.22.17」

    很多人对程序员的固有印象之一便是常加班.易"猝死"!近几年的许多报道似乎也进一步加深了这种印象.应该如何更好地健康地活着.敲喜欢的代码呢?HowToLiveLonger 教你如何从 ...

  8. XCTF练习题---WEB---baby_web

    XCTF练习题---WEB---baby_web flag:flag{very_baby_web} 解题步骤: 1.观察题目,打开场景 2.观察题目内容,想想初始页面是哪个,再看看URL,尝试输入in ...

  9. XCTF练习题---MISC---embarrass

    XCTF练习题---MISC---embarrass flag:flag{Good_b0y_W3ll_Done} 解题步骤: 1.观察题目,下载附件,这道题真难 2. 拿到手以后默认使用Wiresha ...

  10. 解决：Could not resolve dependencies for project xxx: Could not find artifact xxx

    引言 运行A module,找不到B module的依赖报错.A.B module都在project中. 报错信息 [INFO] Scanning for projects... [INFO] [IN ...