vue实现模糊搜索功能

标题 使用计算属性来实现该功能

首先写好一个列表
vue实现模糊搜索功能_第1张图片
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200331213310518.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQxMzI2,size_16,color_FFFFFF,t_70vue实现模糊搜索功能_第2张图片

写好的样式是这样滴
vue实现模糊搜索功能_第3张图片

操作来了

vue实现模糊搜索功能_第4张图片
在computed里面定义了一个search函数 使用filter过滤

接下来

vue实现模糊搜索功能_第5张图片
在method 里面写一个sousuo1函数 进行一个判断 如果搜索这个输入框框里是空 就是展示原数据 如果这个不为空 就会展示搜索到的数据

最后 很重要

vue实现模糊搜索功能_第6张图片
把list改为sousuo1()这个函数

看效果
vue实现模糊搜索功能_第7张图片

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





    
    
    Page Title
    
    
    
    
    



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

你可能感兴趣的:(笔记,教程)