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 相关文章推荐
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
浅析node.js中close事件
Nov 26 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
JS闭包用法实例分析
Mar 27 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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
Protoss热键控制
2020/03/14 星际争霸
基于mysql的论坛(4)
2006/10/09 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
js 调用百度分享功能
2017/02/27 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Python3中的bytes和str类型详解
2019/05/02 Python
selenium+python环境配置教程详解
2019/05/28 Python
python字典的遍历3种方法详解
2019/08/10 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
详解python程序中的多任务
2020/09/16 Python
耐克亚太地区:Nike APAC
2019/12/07 全球购物
Linux的主要特性
2014/10/06 面试题
文艺演出策划方案
2014/06/07 职场文书
市场部岗位职责
2015/02/12 职场文书
2015年科普工作总结
2015/07/23 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js