过滤 与 全文索引

<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. hdu6052

    hdu6052 题意 给出一个 \(n * m\) 的网格矩阵,每个格子都有颜色,随机选出一个子矩阵,问颜色种数的期望. 分析 那么我们可以去算所有矩阵的颜色种数之和,也就是每种颜色出现过的矩阵的个数 ...

  2. 数字 function

    SELECT TRUNC(15.79), TRUNC(), ROUND(15.79), ), ), FLOOR(26.983), CEIL(26.123), ), ), ), MOD(,) FROM ...

  3. 1.2(Spring MVC学习笔记) Spring MVC核心类及注解

    一.DispatcherServlet DispatcherServlet在程序中充当着前端控制器的作用,使用时只需在web.xml下配置即可. 配置格式如下: <?xml version=&q ...

  4. Java压缩字符串的方法收集

    说明: 1.一般来说要实现压缩,那么返回方式一般是用byte[]数组. 2.研究发现byte[]数组在转成可读的String时,大小会还原回原来的. 3.如果采用压缩之后不可读的String时,互相转 ...

  5. 利用Impromptu实现duck typing的封装

    Impromptu是一个动态生成代码实现接口的库,可以非常方便我们实现DuckType编程: public interface IUser    {        string Name { get; ...

  6. Delphi制作软键盘

        { 作者: han 日期: 2006.06.02 } unit softkey; interface uses Windows, Messages, SysUtils, Variants, C ...

  7. JS面向对象之作用域

    作用域 词法作用域 作用域 域表示的就是范围,即作用范围 就是一个名字在什么地方能使用,在什么地方不能使用 块级作用域 块级别的作用范围 // 在 c , java 等编程语言中,下面的语法报错 { ...

  8. CSS的伪元素和伪类

    css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类—— :hover, :active, :visited, :focus. 常见伪元素——::first-letter,::first-l ...

  9. unity 部分obj不接受后处理

    考虑了很多方案,比如渲染次序和mask(stencilebuffer) 渲染次序 sorting order(深度) renderer都有的属性能开放出来,sprite renderer原本就开放在i ...

  10. Vue实例总结

    一.登陆框的要点总结: 1.暂无数据就是要myData里没数据时候才出来:删除全部就是要有数据才出来.v-show的使用: 2.表格行就是需要循环数据,v-for.{{$index}}.{{item. ...