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 相关文章推荐
Jquery 设置标题的自动翻转
Oct 03 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
javaScript语法总结
Nov 25 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
Express之托管静态文件的方法
Jun 01 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
js html实现计算器功能
Nov 13 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
npm全局环境变量配置详解
Dec 15 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
多文件上传的例子
2006/10/09 PHP
收集的DedeCMS一些使用经验
2007/03/17 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
JS返回顶部实例代码
2020/08/09 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
python算法学习之计数排序实例
2013/12/18 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python中的编码知识整理汇总
2016/01/26 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
实习生个人的自我评价
2013/12/08 职场文书
高一政治教学反思
2014/01/28 职场文书
体育教师个人工作总结
2015/02/09 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang