<div id="app">
<input v-model='search' />
<ul>
<li v-for="item in items">
<label>价格</label><span v-html="item.name"></span>
<label>¥</label><span v-html="item.price"></span>
</ul>
</div>
new Vue({
el: '#app',
data: {
search: '',
products: [{
name: '苹果',
price: 25
}, {
name: '香蕉',
price: 15
}, {
name: '雪梨',
price: 65
}, {
name: '宝马',
price: 2500
}, {
name: '奔驰',
price: 10025
}, {
name: '柑橘',
price: 15
}, {
name: '奥迪',
price: 25
}]
},
computed: {
items: function() {
var _search = this.search;
if (_search) {
return this.products.filter(function(product) {
return Object.keys(product).some(function(key) {
return String(product[key]).toLowerCase().indexOf(_search) > -1
})
})
} return this.products;
}
}
})

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. C# 处理XML的基本操作

    文章部分代码引用参考文章, 文末参考文章已标注 ,本篇文章建立在两篇参考文章基础上,可以先阅读参考文章 XML 相关类 XDocument XmlDocument XmlReader  XmlWrit ...

  2. Activiti工作流小序曲

    一般涉及到OA.ERP等公司办公系统都必须有一套办公流程,这时候使用activiti工作流框架会大大减轻我们的工作量,提高我们的开发效率. Activiti工作流简单介绍: 工作流(workflow) ...

  3. AtomicInteger关键字

    validate 关键字可以保证多线程之间的可见性,但是不能保证原子操作.(需要了解java内存模型jmm) package com.cn.test.thread; public class Vola ...

  4. CSS 盒子模型及 float 和 position

    ## CSS和模型 ##CSS盒模型本质上是一个盒子,封装周围的 HTML 元素,包括 外边距(marign),边框(border),填充(padding),内容物(content) 盒子模型的类型: ...

  5. FLASK实现上传下载功能

    #!-*-coding=utf-8-*- # from flask import Flask # # app = Flask(__name__) # # # @app.route('/') # def ...

  6. javascript运算符之==和===

    1.== :判断两个数是否相等,在比较之前会自动转化类型再做比较.为确定两个运算数是否相等,这两个运算符都会进行类型转换. 执行类型转换的规则如下: 1.如果一个运算数是 Boolean 值,在检查相 ...

  7. 定期重启SSRS 服务

    SSRS 在执行了一段时间之后会变得非常卡,遇到好几次内存暴涨,CPU100%的情况. 但是在查询了一通以后发现,这个时间没有人在运行报告,不知道是哪里有问题,没有回收... 所以决定定期在晚上没有不 ...

  8. 基于SignalR的站点有连接数限制问题及解决方案

    最近在做一个Web项目,由于需要实现客户端和服务器的双向通信,所以就用到了SignalR2.0:站点的运行环境是Win7服务器,IIS7,但遇到了一个问题,就是当客户端连接数到达10个以后,后面的用户 ...

  9. 08_Redis持久化——RDB方式

    [简述] 持久化:Redis能将数据从内存中以某种形式同步到硬盘中,使得重启后可以根据硬盘中的记录恢复数据,这一过程就是持久化. Redis支持两种方式的持久化,简单来说如下: RDB方式:会根据指定 ...

  10. ANN神经网络——Sigmoid 激活函数编程练习 (Python实现)

    # ---------- # # There are two functions to finish: # First, in activate(), write the sigmoid activa ...