Vue通过input筛选数据
<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筛选数据的更多相关文章
- Vue小练习(for循环,push方法,冒泡,if判断(以及与for循环的连用),按钮高亮,根据input框筛选数据)
vue练习 ''' 1. 先有一下成绩单数据 scores = [ { name: 'Bob', math: 97, chinese: 89, english: 67 }, { name: 'Tom' ...
- Atitit vue.js 把ajax数据 绑定到form表单
Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
- (六)Net Core项目使用Controller之一 c# log4net 不输出日志 .NET Standard库引用导致的FileNotFoundException探究 获取json串里的某个属性值 common.js 如何调用common.js js 筛选数据 Join 具体用法
(六)Net Core项目使用Controller之一 一.简介 1.当前最流行的开发模式是前后端分离,Controller作为后端的核心输出,是开发人员使用最多的技术点. 2.个人所在的团队已经选择 ...
- vue中input输入第一个字符时,光标会消失,需要再次点击才能输入
vue中input输入第一个字符时,光标会消失,需要再次点击才能输入 在这里我犯了一个小错误,v-if语法比较倾向于一次性操作,当input获取焦点时,v-if判断为true,立即刷新数据,进行渲染, ...
- [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅
有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...
- .NET LINQ 筛选数据
筛选数据 筛选指将结果集限制为只包含那些满足指定条件的元素的操作. 它又称为选择. 方法 方法名 说明 C# 查询表达式语法 Visual Basic 查询表达式语法 更多信息 OfType ...
- easyui 筛选数据及仅允许选择数据
先说需求,本地已缓存数据源,用户输入拼音码或编号,筛选数据作为新的数据源,然后通过键盘选择. 再说问题,easyui combogrid控件,在mode为local,也就是将数据源缓存在本地的情况下, ...
- 开始VS 2012中LightSwitch系列的第4部分:太多信息了!使用查询来排序和筛选数据
[原文发表地址] Beginning LightSwitch in VS 2012 Part 4: Too much information! Sorting and Filtering Data ...
随机推荐
- IIS调试技术之 Debug Diagnostic (调试诊断)
IIS 调试技术之 Debug Diagnostic (调试诊断) 1 概述 1.1 文档简介 系统出现错误或崩溃,免不了要进行调试.调试能进行的前提是错误能重现,但实际上要重现一个错误有 ...
- Excel批量生成条形码
项目要求需要将信息做成条形码的形式,以便通过手持设备直接查看信息,因本次项目信息为固定信息,不需随机生成,故采用本方法: 代码随机生成二维码暂时没有接触,后续有时间会研究 步骤: 1.新建 Excel ...
- js 去除空格回车换行
开发中遇到特殊需求,需要将空格回车换行替换成逗号 直接使用正则表达式解决: 变量.replace(/\s+/g,","); 如果想要去除则将后面逗号变成空就OK了.
- java 断点续传(springMvc),可支持html5 vedio在线播放 posted @ 2017年3月11日 16:15:44
Controller @RequestMapping(value = "/getVedio") public void getVedio(HttpServletRequest re ...
- 移动端Hybird的网络层优化策略
一.前端代码策略:域名切换(多域名部署),解决DNS缓存及域名劫持 二.客户端策略 客户端在空闲时ping cdn节点域名列表中的域名,测量延时.丢包等数据.如果延迟 > xxx,丢包 > ...
- JavaScript 访问对象属性和方法及区别
这篇文章主要介绍了浅析JavaScript访问对象属性和方法及区别的相关资料,仅供参考 属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸. ...
- ERP与电子商务的集成
目前现状: 一般来说,企业中存在三种流:物资流.资金流和信息流,其中,信息流不是孤立存在的,它与物资流和资金流密切相关,反映了物资和资金流动前.流动中和流动后的状况. 电子商务与ERP被分裂开来,没有 ...
- Java 之变量和常量(2)
Java中的关键字: Java 语言中有一些具有特殊用途的词被称为关键字.关键字对 Java 的编译器有着特殊的意义,在程序中应用时一定要慎重哦!! Java 中常用关键字: 问:这么多,记不住啊.. ...
- RocketMQ读书笔记2——生产者
[生产者的不同写入策略] 生产者向消息队列里写入数据,不同的业务需要生产者采用不同的写入策略: 同步发送.异步发送.延迟发送.发送事务消息等. [DefaultMQProduce示例] public ...
- 多盟、Testin云测、K9test,助阵阿里云1218 移动开发者狂欢
经过双十一.双十二全民剁手狂欢后,阿里巴巴旗下的云计算业务,也为IT程序员们打造一场独特的盛宴. 阿里云计算12月18日对旗下主力云计算产品进行打折促销,云服务商.风投机构等都将参与到这场狂欢中.“我 ...