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 EasyUI 中文API Button使用实例
Apr 14 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
React优化子组件render的使用
May 12 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
如何解决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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
wxPython学习之主框架实例
2014/09/28 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
python与js主要区别点总结
2020/09/13 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
师德师风承诺书
2014/05/23 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技