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 相关文章推荐
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
mocha的时序规则讲解
Feb 16 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
Ajax异步刷新功能及简单案例
Nov 20 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
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
跟老齐学Python之Import 模块
2014/10/13 Python
Python操作MySQL简单实现方法
2015/01/26 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
spyder常用快捷键(分享)
2017/07/19 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
Python中zip函数如何使用
2020/06/04 Python
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
专升本自我鉴定
2013/10/10 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫