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 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
js脚本实现数据去重
Nov 27 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
如何解决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代码书写习惯优化小结
2013/06/20 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
Python 正则表达式实现计算器功能
2017/04/29 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
学习python分支结构
2019/05/17 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
项目开发计划书
2014/01/09 职场文书
工程技术员岗位职责
2014/03/02 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
公民授权委托书范本
2014/09/17 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
沈阳故宫导游词
2015/01/31 职场文书
房屋产权证明书
2015/06/19 职场文书