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 相关文章推荐
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
Ext面向对象开发实践(续)
Nov 18 Javascript
jquery+json实现的搜索加分页效果
Mar 31 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
正则表达式语法
2006/10/09 Javascript
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
python mysqldb连接数据库
2009/03/16 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
公司爱心捐款倡议书
2014/05/14 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js