Vue2.0实现1.0的搜索过滤器功能实例代码


Posted in Javascript onMarch 20, 2017

Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,orderBy。官方文档给了通过计算属性实现1.0搜索过滤器功能,自己又加入了大小写通用检索功能,比较简单,学一下。

<body>
  <div class="app">
    <input type="text" v-model="name">
    <ul>
      <li v-for="user in newUsers" >
        {{ user.name }}
      </li>
    </ul>
  </div>
  <script>
    new Vue({
      el: '.app',
      data: {
        name: '',
        users: [
          { name: 'Bruce' },
          { name: 'Chuck' },
          { name: 'Jackie' },
          { name: '赵' }
        ] 
      },
      computed: {
        newUsers: function () {
          var that = this;
          return that.users.filter(function (user) {
            return user.name.toLowerCase().indexOf(that.name.toLowerCase()) !== -1;
          })
        }

      }
    })
  </script>
</body>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 #Javascript
Vue.js路由vue-router使用方法详解
Mar 20 #Javascript
Vue插件写、用详解(附demo)
Mar 20 #Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 #Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 #Javascript
vue.js事件处理器是什么
Mar 20 #Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 #Javascript
You might like
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php提交post数组参数实例分析
2015/12/17 PHP
PHP实现百度人脸识别
2019/05/06 PHP
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
文案策划求职信
2014/04/14 职场文书
迎新生欢迎词
2015/01/23 职场文书
职工食堂管理制度
2015/08/06 职场文书
汽车销售合同文本
2019/08/08 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
Python中的 No Module named ***问题及解决
2022/07/23 Python