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测试题练习代码
Oct 10 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 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
php中的观察者模式
2010/03/24 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
JS原生数据双向绑定实现代码
2017/08/14 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
js实现3D旋转相册
2020/08/02 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
使用python实现扫描端口示例
2014/03/29 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
用Python解决x的n次方问题
2019/02/08 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
python global和nonlocal用法解析
2020/02/03 Python
python实现梯度下降法
2020/03/24 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
目标责任书范本
2014/04/16 职场文书
物资采购方案
2014/06/12 职场文书
六查六看剖析材料
2014/10/06 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL