过滤 与 全文索引

<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 过滤与全文索引的更多相关文章

  1. vue过滤数字为2位小数点,过滤器

    过滤数字为2位小数点 filters: { //保留2位小数点过滤器 不四舍五入 number(value) { var toFixedNum = Number(value).toFixed(3); ...

  2. vue过滤动画

    一.使用<transition name="fade"></transition>标签 name="fade", 是创建个fade的类名 ...

  3. vue 过滤

  4. vue过滤金额自动补全小数点

    watch:{ //监听input双向绑定 balance(value) { //保留2位小数点过滤器 不四舍五入 var toFixedNum = Number(value).toFixed(3); ...

  5. Vue#表单控件绑定

    使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...

  6. vue新手入门指导,一篇让你学会vue技术栈,本人初学时候的文档

    今天整理文档突然发现了一份md文档,打开一看 瞬间想起当年学习vue的艰难路,没人指导全靠自己蒙,下面就是md文档内容,需要的小伙伴可以打开个在线的md编译器看一看,我相信不管是新人还是老人  入门总 ...

  7. 高效开发 Web 单页应用解决方案

    于 2017 年初,有在 Github 建立并维护一个项目:Vue Boilerplate Template,欲成就一款开箱即用 Vue + Webpack 的脚手架模版:其目标与宗旨是:根据以往经验 ...

  8. Vue数组更新及过滤排序

    前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...

  9. Vue.js示例:GitHub提交(watch数据,created钩子,filters过滤); 网格组件(功能:1.检索,2排序);

    GitHub提交 codePen:   https://codepen.io/chentianwei411/pen/wEVPZo 注意:频繁看案例,可能会被限制. 重点: 表单输入绑定, 单选按钮的使 ...

随机推荐

  1. Python与数据结构[4] -> 散列表[1] -> 分离链接法的 Python 实现

    分离链接法 / Separate Chain Hashing 前面完成了一个基本散列表的实现,但是还存在一个问题,当散列表插入元素冲突时,散列表将返回异常,这一问题的解决方式之一为使用链表进行元素的存 ...

  2. Milk Pails(BFS)

    Milk Pails 时间限制: 1 Sec  内存限制: 64 MB提交: 16  解决: 4[提交][状态][讨论版] 题目描述 Farmer John has received an order ...

  3. Exchange2010启用反垃圾邮件功能

    今天邮箱服务器发现有大量发件人为空的邮件等待执行,也就是说空邮件堵塞了队列. 一般来说,空邮件就是别人发送垃圾邮件给你,你的服务上不存在这个收件人,那么系统会产生一封退信告诉你这封邮件已经被退.而ex ...

  4. [BZOJ 1407] Savage

    Link:https://www.lydsy.com/JudgeOnline/problem.php?id=1407 Solution: 由于此题里n的范围很小,因此可以直接从小到大枚举m 那么问题转 ...

  5. 【找规律】Codeforces Round #392 (Div. 2) C. Unfair Poll

    C. Unfair Poll time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  6. 微服务之SpringCloud实战(三):SpringCloud Eureka高可用

    高可用Eureka 高可用我就不再过多解释了,Eureka Server的设计一开始就考虑了高可用的问题,在Eureka的服务治理设计中,所有的节点即是服务提供方也是消费方,注册中心也不例外,上一章中 ...

  7. 生成唯一code

    private String getCode() { List<String> ptypeCodeList = mapper.findCodeList(); String code = & ...

  8. Jquery中的ajax应用(第九章PPT)

    <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1&q ...

  9. Centos7.3 bbc tools安装

    http://blog.csdn.net/orangleliu/article/details/54099528 更新到最新 CentOS 7.3 1611 yum update -y cat /et ...

  10. 开源用户界面和布局的套件XiaoCai.WinformUI(美化用户界面利器)

    发布一款开源用户界面和布局的套件,请朋友们多提提宝贵建议! XiaoCai.WinformUI主要是解决用户界面和布局的套件,能够快速进行合理性布局,美化用户界面. 因为之前发布到谷歌里,好多朋友都说 ...