vue 过滤与全文索引
过滤 与 全文索引
<template>
<div>
<input type="text" v-model="query">
<ul>
<li v-for="(item, index) in computedList">
{{ item.msg }}
</li>
</ul>
</div>
</template> <script>
export default {
data () {
return {
query: '',
list: [
{ msg: 'Bruce Lee' },
{ msg: 'Jackie Chan' },
{ msg: 'Chuck Norris' },
{ msg: 'Jet Li' },
{ msg: 'Kung Fury' }
]
}
},
computed: {
computedList: function () {
var vm = this
return this.list.filter(function (item) {
return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
})
}
}
}
</script>
vue 过滤与全文索引的更多相关文章
- vue过滤数字为2位小数点,过滤器
过滤数字为2位小数点 filters: { //保留2位小数点过滤器 不四舍五入 number(value) { var toFixedNum = Number(value).toFixed(3); ...
- vue过滤动画
一.使用<transition name="fade"></transition>标签 name="fade", 是创建个fade的类名 ...
- vue 过滤
- vue过滤金额自动补全小数点
watch:{ //监听input双向绑定 balance(value) { //保留2位小数点过滤器 不四舍五入 var toFixedNum = Number(value).toFixed(3); ...
- Vue#表单控件绑定
使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...
- vue新手入门指导,一篇让你学会vue技术栈,本人初学时候的文档
今天整理文档突然发现了一份md文档,打开一看 瞬间想起当年学习vue的艰难路,没人指导全靠自己蒙,下面就是md文档内容,需要的小伙伴可以打开个在线的md编译器看一看,我相信不管是新人还是老人 入门总 ...
- 高效开发 Web 单页应用解决方案
于 2017 年初,有在 Github 建立并维护一个项目:Vue Boilerplate Template,欲成就一款开箱即用 Vue + Webpack 的脚手架模版:其目标与宗旨是:根据以往经验 ...
- Vue数组更新及过滤排序
前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...
- Vue.js示例:GitHub提交(watch数据,created钩子,filters过滤); 网格组件(功能:1.检索,2排序);
GitHub提交 codePen: https://codepen.io/chentianwei411/pen/wEVPZo 注意:频繁看案例,可能会被限制. 重点: 表单输入绑定, 单选按钮的使 ...
随机推荐
- 【计算几何】URAL - 2101 - Knight's Shield
Little Peter Ivanov likes to play knights. Or musketeers. Or samurai. It depends on his mood. For pa ...
- 【强连通分量缩点】【记忆化搜索】bzoj1589 [Usaco2008 Dec]Trick or Treat on the Farm 采集糖果
缩成DAG f(i)表示以i为起点的最长路 #include<cstdio> #include<cstring> #include<algorithm> #incl ...
- [CF915F]Imbalance Value of a Tree
[CF915F]Imbalance Value of a Tree 题目大意: 一棵\(n(n\le10^6)\)个结点的树,每个结点有一个权值\(w_i\).定义\(I(i,j)\)为\(i\)到\ ...
- [CF735E/736C]Ostap and Tree
题目大意: 一个$n(n\le100)$个点的树,将一些点染成黑点,求满足每个点到最近黑点的距离$\le k(k\le\min(20,n-1))$的方案数. 思路: 树形DP. 用$f[i][j]$表 ...
- FCL研究-目录
准备深入的学习下 FCL,太过于庞大,有些无从下口.用最笨的方法,先从常用的几个命名空间入手. 微软发布了.NET 的源码,学习起来更加方便了. 集合 导航: FCL研究-集合- System.Col ...
- VS2017序列号|Visual Studio 2017 激活码 序列号
企业版:NJVYC-BMHX2-G77MM-4XJMR-6Q8QF 专业版:KBJFW-NXHK6-W4WJM-CRMQB-G3CDH
- CentOS--在CentOS安装PHP5.6
查看centos的版本: [root@localhost ~]# lsb_release -a LSB Version: :core-3.1-amd64:core-3.1-ia32:core-3 ...
- 关于BOM UTF8
这三篇可以看下: http://www.zhihu.com/question/20167122 http://www.cnblogs.com/DDark/archive/2011/11/28/2266 ...
- SpringBoot整合Quartz定时任务
记录一个SpringBoot 整合 Quartz 的Demo实例 POM.XML文件 <!-- 定时器任务 quartz需要导入的坐标 --> <dependency> < ...
- stl之list双向链表容器应用基础
不同于採用线性表顺序存储结构的vector和deque容器.list双向链表中任一位置的元素差值.插入和删除,都具有高效的常数阶算法时间复杂度O(1). 头文件 #include<list> ...