Vue计算属性实现模糊查询_神圣的小昌哥的博客-程序员宅基地

技术标签: vue  js模糊查询  计算属性  

这是在本地实现一个模糊查询的例子,期初我定义了一个方法,来监测input值发生该改变时触发过滤符合条件的值。

html:
 

    <div id="app">
        <input type="text" @input="handleInput()" v-model="mytext">
        <ul v-for="(item,index) in arr">
            <li>{
   {item}}</li>
        </ul>
    </div>

js

<script>
    var vu = new Vue({
        el:"#app",
        data:{
            mytext:"",
            arr:[
                "南京市第一中学",
                "南京市第二中学",
                "南京市第三中学",
                "南京市外国语学校",
                "南京市栖霞高级中学"
            ],
            list:[
                "南京市第一中学",
                "南京市第二中学",
                "南京市第三中学",
                "南京市外国语学校",
                "南京市栖霞高级中学"
            ]
        },
        methods:{
            handleInput(){
                //利用输入值,过滤符合条件的元素
                //filter过滤数组
                var newList = this.list.filter(item=>item.indexOf(this.mytext) > -1)
                this.arr = newList;
            }
        }
    })
</script>

这样的方法会监测input值改变,调用handleInput过滤,但是会改变arr原始数组的值。不利于二次过滤,必须要使用变量来存储原始数组。而造成代码冗余。

计算属性可以基于响应式依赖进行缓存。在监测到input值发生改变时,相关响应式依赖发生改变重新求值。这就意味着只要 arr还没有发生改变,多次访问 handleinput 计算属性会立即返回之前的计算结果,而不必再次执行函数。

计算属性html:

    <div id="app">
        <input type="text" v-model="mytext">
        <ul v-for="(item,index) in handleInput">
            <li>{
   {item}}</li>
        </ul>
    </div>

js:

<script>
    var vu = new Vue({
        el:"#app",
        data:{
            mytext:"",
            arr:[
                "南京市第一中学",
                "南京市第二中学",
                "南京市第三中学",
                "南京市外国语学校",
                "南京市栖霞高级中学"
            ],
        },
        computed:{
            handleInput(){
                //利用输入值,过滤符合条件的元素
                //filter过滤数组
                var newList = this.list.filter(item=>item.indexOf(this.mytext) > -1)
                this.arr = newList;
            }
        }
    })
</script>



 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_40749372/article/details/119727343

智能推荐

IBM服务器raid5崩溃数据恢复方案及过程_weixin_34174132的博客-程序员宅基地

概述: IBM X3850服务器,5块73G SAS硬盘,其中4块组成一个RAID5,另一块做为热备盘(Hot-Spare),3号盘早已经离线,但热备盘未自动激活rebuild(原因不明),之后2号盘离线,RAID崩溃。 操作系统为linux redhat 5.3,应用系统为构架于oracle的一个oa,数据重要,时间很急。因orac...

Linux下TCP延迟确认(Delayed Ack)机制导致的时延问题分析_qian_xiaoqian的博客-程序员宅基地

版权声明:本文由潘安群原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/105来源:腾云阁 https://www.qcloud.com/community 案例一:同事随手写个压力测试程序,其实现逻辑为:每秒钟先连续发N个132字节的包,然后连续收N个由后台服务回显回来的132字节包。其代码简化

在计算机领域中多媒体是指什么意思,1、在计算机领域中,媒体指的是 A) 各种信息的编码 B) 计算机输入输出信息 C) 表示和传播信息的载体 D) 计..._weixin_39631007的博客-程序员宅基地

1、在计算机领域中,媒体指的是A)各种信息的编码B)计算机输入输出信息C)表示和传播信息的载体D)计01、在计算机领域中,媒体指的是A) 各种信息的编码 B) 计算机输入输出信息C) 表示和传播信息的载体 D) 计算机屏幕显示的信息2、多媒体计算机系统指的是计算机具有处理________的功能。A) 交互式 B) 照片、图形C) 文字与数据处理 D) 图、文、声、影像和动画3、下列...

php二次编译,编译安装LAMP:PHP篇_许桐楷的博客-程序员宅基地

前面编译安装完成了 Apache 和 MySQL,Apache 的编译安装以及需要的系统之类的见已更新 PHP 7.0.X 版本编译选项——20160115 一、用 root 用户连接上主机二、安装 PHP 需要的组件安装 PHP 需要的大部分必要组件在安装 Apache 之前已经安装了, 现在安装上剩余的一部分。1、安装 libiconv(iconv 模块)libiconv 是由于有些计算机还在...

python脚本常见包_Python 常用包_weixin_39884270的博客-程序员宅基地

转自: http://fsldn.blog.163.com/blog/static/4546432009012111714900/wxPython如果你之前是 windows 程序员,用 MFC 或者 WIN32API 开发界面程序,那进入Python 国度最好的 GUI 选择应该是 wxPython。它是 wxWidgets 的 Python Bind,与 wxWidgets的开发完美同步,最为...

奔驰柏林之声旋转高音喇叭音响 成都蔚一车改_chengshanpa8283的博客-程序员宅基地

适配车型:奔驰S级新E级C级GLC均可升级改装原厂柏林之声音响套装 柏林之声:奔驰原厂柏林之声被誉为音响界的劳斯莱斯,无损安装不并线不破线,可恢复出厂状态,不影响质保,旋转高音2个柏林高音2个柏林中音7个柏林低音2个喇叭罩8个,13件套喇叭套装,增加功放音质提升7倍。 成都蔚...

随便推点

802.11 wireless networks(2)_zuobian1985的博客-程序员宅基地

Lack of physical Boundary   物理边界的缺少Traditional network security places a great deal of emphasis on physical security of the network components. Data on the network travels over well-defined pathways

matlab套利,期现套利-现货组合构建(1)-市值权重法_阿尔法查理的博客-程序员宅基地

本帖最后由 faruto 于 2011-12-27 23:58 编辑期现套利-现货组合构建(1)-市值权重法最近抽空做的一点东西,常见的期现套利现货构建的方法之1——市值权重法。一直想把跟踪指数的东西做一下,都是常见的方法,高手绕行。采用市值权重法,选取150只股票来复制HS300指数,然后通过二次规划quadprog来进行权重优化。% 样本内数据20110104-20111216,日线% 共23...

C++修改main()函数的argv_>LWL<的博客-程序员宅基地

当argv[1]被重新赋值后,如果数组越界,会把argv[2]中的内容挤掉,argv[2]中存储的是argv[1]中越界的部分#include &lt;opencv2/opencv.hpp&gt;#include &lt;opencv2\highgui\highgui.hpp&gt;#include &lt;opencv2/core/core.hpp&gt;#include &lt;fst...

.NET ToString() format格式化字符串(常用)_女汉纸一枚的博客-程序员宅基地

前言    我们平常会用到货币数据类型,尤其当我们计算金钱或者算数的时候经常会遇到保留几位小数,而且碰到日期格式问题的时候,经常不知道选择什么样的格式比较合适,下面我找了一部分常用的.NET ToString() format格式化字符串分享给大家。内容             C

118_容器_自定义泛型_深入2_无多态_通配符_无泛型数组_jdk7泛型使用_werdzs的博客-程序员宅基地

通配符通配符的测试-TestWildcardpackage genericity_wildcard;import java.util.ArrayList;import java.util.List;/** * ? -->通配符,类型不确定,用于声明变量|形参上 * 不能用在 * 1、创建对象 * 2、创建泛型类 泛型方法 泛型接口上 */public class TestWildca

推荐文章

热门文章

相关标签