1. <div id="app">
  2. <input v-model='search' />
  3. <ul>
  4. <li v-for="item in items">
  5. <label>价格</label><span v-html="item.name"></span>
  6. <label></label><span v-html="item.price"></span>
  7. </ul>
  8. </div>
  1. new Vue({
  2. el: '#app',
  3. data: {
  4. search: '',
  5. products: [{
  6. name: '苹果',
  7. price: 25
  8. }, {
  9. name: '香蕉',
  10. price: 15
  11. }, {
  12. name: '雪梨',
  13. price: 65
  14. }, {
  15. name: '宝马',
  16. price: 2500
  17. }, {
  18. name: '奔驰',
  19. price: 10025
  20. }, {
  21. name: '柑橘',
  22. price: 15
  23. }, {
  24. name: '奥迪',
  25. price: 25
  26. }]
  27. },
  28. computed: {
  29. items: function() {
  30. var _search = this.search;
  31. if (_search) {
  32. return this.products.filter(function(product) {
  33. return Object.keys(product).some(function(key) {
  34. return String(product[key]).toLowerCase().indexOf(_search) > -1
  35. })
  36. })
  37. }
  38.  
  39. return this.products;
  40. }
  41. }
  42. })

Vue通过input筛选数据的更多相关文章

  1. Vue小练习(for循环,push方法,冒泡,if判断(以及与for循环的连用),按钮高亮,根据input框筛选数据)

    vue练习 ''' 1. 先有一下成绩单数据 scores = [ { name: 'Bob', math: 97, chinese: 89, english: 67 }, { name: 'Tom' ...

  2. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  3. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  4. (六)Net Core项目使用Controller之一 c# log4net 不输出日志 .NET Standard库引用导致的FileNotFoundException探究 获取json串里的某个属性值 common.js 如何调用common.js js 筛选数据 Join 具体用法

    (六)Net Core项目使用Controller之一 一.简介 1.当前最流行的开发模式是前后端分离,Controller作为后端的核心输出,是开发人员使用最多的技术点. 2.个人所在的团队已经选择 ...

  5. vue中input输入第一个字符时,光标会消失,需要再次点击才能输入

    vue中input输入第一个字符时,光标会消失,需要再次点击才能输入 在这里我犯了一个小错误,v-if语法比较倾向于一次性操作,当input获取焦点时,v-if判断为true,立即刷新数据,进行渲染, ...

  6. [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

    有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...

  7. .NET LINQ 筛选数据

    筛选数据      筛选指将结果集限制为只包含那些满足指定条件的元素的操作. 它又称为选择. 方法 方法名 说明 C# 查询表达式语法 Visual Basic 查询表达式语法 更多信息 OfType ...

  8. easyui 筛选数据及仅允许选择数据

    先说需求,本地已缓存数据源,用户输入拼音码或编号,筛选数据作为新的数据源,然后通过键盘选择. 再说问题,easyui combogrid控件,在mode为local,也就是将数据源缓存在本地的情况下, ...

  9. 开始VS 2012中LightSwitch系列的第4部分:太多信息了!使用查询来排序和筛选数据

    [原文发表地址]  Beginning LightSwitch in VS 2012 Part 4: Too much information! Sorting and Filtering Data ...

随机推荐

  1. CMS gc随记

    在查看CMS相关中文资料时,都提到了 并发预清理(Concurrent precleaning) 重新标记(STW remark) 目的是重新标记在并发标记阶段,由于对象状态的改变而标记遗漏的对象. ...

  2. Python学习之环境搭建及模块引用

    这是我学习Python过程积累的经验和踩过的坑,希望学习Python的新手们能尽量避免,以免不必要的时间浪费.今天也是我第一次接触Python. 基础语法看了两个晚上,所以如果没看的朋友们,抽时间先看 ...

  3. access 2010,数学

    access 2010(窗体控制和创建窗体) 窗体向导:选择表格---创建---窗体---窗体向导---选择表/查询---全选可用字段---选择布局---设置标题---完成. 其他窗体:选择表格--- ...

  4. 1.文本编辑器-->CKEditor+CKFinder使用与配置

    一.CKEditor介绍 官网地址:http://ckeditor.com CKEditor下载地址:http://ckeditor.com/download CKFinder(免费版本)下载地址:h ...

  5. 简单的js定时器

    var flag = 0; var time = 0; var stoptime = setInterval(function(){ if (flag<9999999) { //执行定时器 } ...

  6. springboot aop使用介绍

    第一步:添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...

  7. 问题小记(MyBatis传参出现的小问题)

    问题一:在MyBatis中注解@Param和ParameterType不能一起用,会报错Parameter 'XXX' not found. Available parameters are [1, ...

  8. Spring cloud ReadTimeout 问题解决

    今天使用Spring cloud @FeignClient 调用远程服务的时候,出现readTimeout问题,通过找资料解决方式如下 在Spring.properties 配置文件中添加如下属性解决 ...

  9. js 去除空格回车换行

    开发中遇到特殊需求,需要将空格回车换行替换成逗号 直接使用正则表达式解决: 变量.replace(/\s+/g,","); 如果想要去除则将后面逗号变成空就OK了.

  10. CentOS 7.2 安装 MySQL 5.6.24

    说明:由于甲骨文公司收购了MySQL后,有将MySQL闭源的潜在风险,因此CentOS社区采用mysql的MariaDB分支的方式来避开这个风险. 所以需要先加入yum的仓库,才能利用yum来安装my ...