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 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
表单元素事件 (Form Element Events)
Jul 17 Javascript
javascript 面向对象编程基础:封装
Aug 21 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
js控制input输入字符解析
Dec 27 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
如何解决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
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
php实现mysql封装类示例
2014/05/07 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
纯js实现背景图片切换效果代码
2010/11/14 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python_LDA实现方法详解
2017/10/25 Python
Django forms组件的使用教程
2018/10/08 Python
python3下pygame如何实现显示中文
2020/01/11 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
学生励志演讲稿
2014/01/06 职场文书
会议开场欢迎词
2014/01/15 职场文书
房屋转让协议书范本
2014/04/11 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
施工现场安全管理制度
2015/08/05 职场文书
终止合同协议书范本
2016/03/22 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server