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脚本实现Web页面信息交互
Oct 11 Javascript
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
为什么node.js不适合大型项目
Apr 28 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安全编程之加密功能
2006/10/09 PHP
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
python批量替换页眉页脚实例代码
2018/01/22 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
python实现贪吃蛇游戏
2020/03/21 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
python 递归相关知识总结
2021/03/03 Python
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
大学自我鉴定范文
2013/12/26 职场文书
生活部的活动方案
2014/08/19 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
公司开会通知
2015/04/20 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
深入理解python多线程编程
2021/04/18 Python
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python