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 相关文章推荐
jquery tools之tooltip
Jul 25 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
微信小程序实现授权登录
May 15 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
php 变量定义方法
2009/06/14 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP导入导出Excel代码
2015/07/07 PHP
php如何连接sql server
2015/10/16 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python编程pygal绘图实例之XY线
2017/12/09 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
纯css3实现照片墙效果
2014/12/26 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
建筑行业的大学生自我评价
2013/12/08 职场文书
学校介绍信范文
2014/01/14 职场文书
大学生党员承诺书
2014/05/20 职场文书
机关职员工作检讨书
2014/10/23 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
golang中的struct操作
2021/11/11 Golang