axure实现搜索功能_vue实现模糊搜索功能

首先写好一个列表

b99d4a217024d26e25e09f5f9ab4a82e.png
b3a36f06ad9ec8cda8c29e2eb2a91825.png

写好的样式是这样滴

fbb3d21a16f67da65d795e276038a9a8.png

操作来了

40ea57034e02f68cb5cc2c4f29276e18.png

在computed里面定义了一个search函数 使用filter过滤

接下来

b7739c809af7861e66be441ec057e88a.png

在method 里面写一个sousuo1函数 进行一个判断 如果搜索这个输入框框里是空 就是展示原数据 如果这个不为空 就会展示搜索到的数据

最后 很重要

dc06e6ffcb33cf5d47256b6f3cf566ec.png

把list改为sousuo1()这个函数

看效果

491189a2b5f1bb9839d0c6b739c009d1.png

接下来把全部代码写上 里面的vue引入的是cdn 直接复制黏贴就可以用

    Page Title
编号 英雄 技能 {{item.id}} {{item.name}} {{item.jn}}

注:文章转自互联网

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/427876.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HOSTNAME问题 和yum配置163源的操作 安装lsb_release,KSH,CSH

HOSTNAME 在 /etc/hosts 里添加一行 127.0.0.1 yourhostname yum配置 来自http://www.cnblogs.com/wutengbiao/p/4188986.html 下载方法1: cd /etc/yum.repos.d/wget http://mirrors.163.com/.help/CentOS6-Base-163.repovi CentOS6-Base-163.repo 把文件里面的$rel…

开机自启动脚本_使用xtu降低笔记本(游戏本)cpu电压及功耗·游戏本延时(以及试着解决开机自启动的问题)...

(额,这应该是我的第一篇真正意义上的博客吧(?),虽然是发在了知乎上,上个月忙了一个月的建站方面的事情,但是服务器买在了国内,昂,然后就没了)为什…

7000更换控制器电源步骤_开关电源控制环路(初级篇:上)

本文是 21Dianyuan 社区原创技术文章,作者 ctus220,感谢作者的辛苦付出。内容目录:1、环路和直流稳压电源的关系2、与环路相关的基本概念波特图,环路稳定性判据,传递函数,零极点3、常用的补偿控制器PI&…

thymeleaf 模板语言简介

参考网址: https://blog.csdn.net/mlin_123/article/details/51816533 1.1 Thymeleaf 在有网络和无网络的环境下皆可运行,而且完全不需启动WEB应用,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果…

python实现排列组合公式算法_朴素贝叶斯算法的Python实现

朴素贝叶斯分类算法被广泛应用于文本分类场景中、包含垃圾邮件、互联网新闻等分类任务,属于有监督学习算法。它独立考量每一维度特征被分类的条件概率,然后综合这些概率对其所在的特征向量做出分类预测,即“假设各个维度上的特征被分类的条件…

c语言操作符总结

一.算术操作符 包括:、 - 、* 、 / 、 % 1.除了%操作符之外,其他的几个操作符可以作用与整数和浮点数。 2.对于/操作符,如果两个操作数都为整数,执行整数除法。而只要有浮点数执行的就是浮点数除法。 3.%操作符的两个操作数必须…

cdr怎么做文字路径_整理128张图片,告诉你文字少的PPT应该怎么做?

点击上方蓝字关注↑,下次看文更方便!微信扫码观看全套Excel、Word、PPT视频作者:自律的音律 来源:自律的音律(ID:yinlvPPT)哈喽,又到周一干货时间。我经常被问到一个问题,PPT 字多的时候&#…

QT安装配置是注意事项

1、源码所在路径不能包含中文 2、构建目录必须和源码目录同级别(在一个文件夹下) 2.1 在 “项目”---构建设置--摘要--构建目录 中 设置构建目录 3、构建套件必须选择正确,否则无法编译 3.1 点击左下角 Debug图标,选择合适的构建…

网件rax40可以刷梅林_美国网件发布全系列Wi-Fi6家用无线路由器,部署未来家用产品市场...

5月25日,美国网件在深圳海上世界文化艺术中心发布全线WiFi 6产品,即RAX40、RAX80、RAX120、RAX200四款产品,重新布局WiFi市场,理论速度远远超出大多数家庭互联网连接所能提供的速度。新产品支持下一代Wi-Fi标准——802.11ax&#…

scikit-learn 学习笔记-- Generalized Linear Models (三)

Bayesian regression 前面介绍的线性模型都是从最小二乘,均方误差的角度去建立的,从最简单的最小二乘到带正则项的 lasso,ridge 等。而 Bayesian regression 是从 Bayesian 概率模型的角度出发的,虽然最后也会转换成一个能量函数的…

ios 部分string颜色_iOS-代码混淆加固方案

对于iOS来说,由于系统是封闭的,APP上架需要通过App Store,安全性来说相当高。但是对于大厂和知名APP而言,别人给的安全保障永远没有自己做的来得踏实。所以对于大厂、少部分企业级和金融支付类应用来说加固是相当重要的。下面是目…

Python入门基础之迭代和列表生成式

什么是迭代 在Python中,如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们成为迭代(Iteration)。 在Python中,迭代是通过 for ... in 来完成的,而很多语言比如C或…

安川最小巧机器人_2020工博会,安川展品前瞻(机器人篇)

~基于YASKAWA(安川)核心产品和i-Mechatronics(i立方-机电一体化)概念,实现客户的生产改革~这次的中国国际工业博览会安川将展出至今为止最多的演示机数量。•提供现在重点关注的智能制造、半导体、汽车制造个性化解决方案•提供适用于所有生产…

EF关闭自动创建数据库表的方式

public class MyEF:DbContext{public MyEF():base("nameCodeFirstDb"){Database.SetInitializer<MyEF>(null);}} } 转载于:https://www.cnblogs.com/kangyuanjiang/p/8726182.html

如何调度spark程序_如何定时,周期性的运行程序?Python APScheduler实现任务灵活调度...

在我们的开发工作中&#xff0c;时常会有这样的开发需求&#xff0c;如需要定时或者周期性的运行某些程序&#xff0c;因此经常用到一些定时服务&#xff0c;如在 Linux系统中使用 Crond 服务实现程序的定时运行。在 Python中也有这样的一个模块&#xff0c;那就是 APScheduler…

caffe生成voc格式lmdb

要训练ssd基本都是在liu wei框架下改&#xff0c;生成lmdb这一关照葫芦画瓢总遇坑&#xff0c;记录之&#xff1a; 1. labelmap_voc.prototxt要根据自己的分类修改&#xff0c;比如人脸检测改成这样&#xff1a; item {name: "none_of_the_above"label: 0display_nam…

redis实现轮询算法_【07期】Redis中是如何实现分布式锁的?

点击上方“Java面试题精选”&#xff0c;关注公众号面试刷图&#xff0c;查缺补漏分布式锁常见的三种实现方式&#xff1a;数据库乐观锁&#xff1b;基于Redis的分布式锁&#xff1b;基于ZooKeeper的分布式锁。本地面试考点是&#xff0c;你对Redis使用熟悉吗&#xff1f;Redis…

prometheus 笔记

前言 prometheus 是监控应用软件类似于nagios. 安装 1.官网下载prometheus-2.2.0.linux-amd64压缩包&#xff0c;解压,执行./prometheus即可。这里重要的是配置文件。 a.如果要远程热加载配置文件,启动时加上--web.enable-lifecycle参数。 调用指令是curl -X POST http://local…

前端radio单选框默认选中_开发记录篇前端内容1

有段时间没有更新文章了&#xff0c;因为是用的公司电脑&#xff0c;没有虚拟机&#xff0c;所以就没法演示hadoop相关的东西了&#xff0c;而且大数据篇的东西需要花费一些时间和精力去收集整理内容&#xff0c;那大数据篇就先暂停一下。最近这段时间的话我可能会更新一些开发…

专属海报小程序_剑3泡泡 | 小程序给你一份专属的账号海报!

01按照惯例&#xff0c;这里是简介paopaods.com本期推送的是&#xff1a;如何正确的使用小程序每个账号均可小程序【剑3泡泡】搜到&#xff0c;生成专属账号海报&#xff01;点击底部【点我卖号】即可拥有&#xff01;02教程开始之前&#xff0c;安利paopaods.com泡泡家定金调整…