编程 Javascript

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

- Author -

姜瑞涛

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题

Nov 06 Javascript

Prototype Selector对象学习

Jul 23 Javascript

javascript 页面划词搜索JS

Sep 28 Javascript

基于jquery异步传输json数据格式实例代码

Nov 23 Javascript

基于jquery实现简单的手风琴特效

Nov 24 Javascript

jQuery侧边栏实现代码

May 06 Javascript

JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】

Jun 21 Javascript

JS简单实现浮动窗口效果示例

Sep 07 Javascript

JavaScript 巧学巧用

May 23 Javascript

简述Angular 5 快速入门

Nov 04 Javascript

JS实现带导航城市列表以及输入搜索功能

Jan 04 Javascript

vue 组件开发原理与实现方法详解

Nov 29 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根据IP判断地区名信息的示例代码

2014/03/03 PHP

简单介绍PHP非阻塞模式

2016/03/03 PHP

解决微信授权回调页面域名只能设置一个的问题

2016/12/11 PHP

popdiv

2006/07/14 Javascript

javaScript 删除字符串空格多种方法小结

2012/10/24 Javascript

jquery获取特定name所有选中的checkbox,支持IE9标准模式

2013/03/18 Javascript

js设置控件的隐藏与显示的两种方法

2014/08/21 Javascript

jQuery中contents()方法用法实例

2015/01/08 Javascript

javascript函数特点实例分析

2015/05/14 Javascript

jQuery解决input超多的表单提交

2015/08/10 Javascript

jQuery插件实现带圆点的焦点图片轮播切换

2016/01/18 Javascript

js实现带农历和八字等信息的日历特效

2016/05/16 Javascript

功能强大的Bootstrap效果展示（二）

2016/08/03 Javascript

Nodejs下用submit提交表单提示cannot post错误的解决方法

2016/11/21 NodeJs

JS实现的相册图片左右滚动完整实例

2016/11/23 Javascript

Jquery Easyui验证组件ValidateBox使用详解（20）

2016/12/18 Javascript

el表达式写入bootstrap表格数据页面的实例代码

2017/01/11 Javascript

node.js基于mongodb的搜索分页示例

2017/01/22 Javascript

ES6新特性之数组、Math和扩展操作符用法示例

2017/04/01 Javascript

Ionic + Angular.js实现图片轮播的方法示例

2017/05/21 Javascript

vue实现购物车案例

2020/05/30 Javascript

python网络编程学习笔记(八)：XML生成与解析（DOM、ElementTree）

2014/06/09 Python

在Python 3中实现类型检查器的简单方法

2015/07/03 Python

浅谈Python 的枚举 Enum

2017/06/12 Python

详谈python read readline readlines的区别

2017/09/22 Python

python实现守护进程、守护线程、守护非守护并行

2018/05/05 Python

Python Web编程之WSGI协议简介

2018/07/18 Python

Python实现将Excel转换成为image的方法

2018/10/23 Python

Python如何实现自带HTTP文件传输服务

2020/07/08 Python

最新茶叶店创业计划书

2014/01/14 职场文书

软件毕业生个人鉴定

2014/03/03 职场文书

校园活动宣传方案

2014/03/28 职场文书

2014国庆节国旗下演讲稿（精选版）

2014/09/26 职场文书

给客户的感谢信

2015/01/21 职场文书

初中语文教学研修日志

2015/11/13 职场文书

PostgreSQL聚合函数介绍以及分组和排序

2022/04/12 PostgreSQL