1. var app5 = new Vue({
    el: '#app5',
    data: {
    shoppingList: [
    "Milk",
    "Donuts",
    "Cookies",
    "Chocolate",
    "Peanut Butter",
    "Pepto Bismol",
    "Pepto Bismol (Chocolate flavor)",
    "Pepto Bismol (Cookie flavor)" ],
    key: ""
    },
    computed: {
    filterShoppingList: function () { // `this` points to the vm instance
    var key = this.key;
    var shoppingList = this.shoppingList; //在使用filter时需要注意的是,前面调用的是需要使用filter的数组,而给filter函数传入的是数组中的每个item,也就是说filter里面的函数,是每个item要去做的,并将每个结果返回。
    return shoppingList.filter(function (item) {
    return item.toLowerCase().indexOf(key.toLowerCase()) != -1 });;
    }
    }
    })

    <ul> Filter Key<input type="text" v-model="key"> <li v-for="item in filterShoppingList"> {{ item }} </li> </ul>

  

vue的filter用法,检索内容的更多相关文章

  1. vue之filter用法

    1.全局写法: 全局过滤器必须写在vue实例创建之前. Vue.filter('testfilter', function (value,text) { // 返回处理后的值 return value ...

  2. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  3. Vue一个案例引发「内容分发slot」的最全总结

    今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...

  4. Django 资源 与 知识 Django中自建脚本并使用Django环境 model中的save()方法说明 filter()用法

    Django 资源 与 知识 Django中自建脚本并使用Django环境 model中的save()方法说明 filter()用法 2018/11/06 Chenxin 资料说明 Django基础入 ...

  5. Vue slot 插槽用法:自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  6. python3 filter用法(举例求0~n之间的素数)

    在用python3求0~n之间的素数时,关于filter用法的有点模糊,于是上网查了一下filter用法. 求0~n之间素数的脚本prime.py: def f(x): plist = [0,0] + ...

  7. Ext.Net学习笔记12:Ext.Net GridPanel Filter用法

    Ext.Net学习笔记12:Ext.Net GridPanel Filter用法 Ext.Net GridPanel的用法在上一篇中已经介绍过,这篇笔记讲介绍Filter的用法. Filter是用来过 ...

  8. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  9. checkbox在vue中的用法总结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...

随机推荐

  1. 利用burp抓取https的包

    本片文章仅供学习使用,切勿触犯法律! 0x01.打开burp的代理监听器 0x02.使用代理访问 这里我是用的是mantra,其他浏览器同理. 0x03.浏览器输入http://burp 点击CA C ...

  2. Cmder的findstr问题

    在环境变量中加入C:\windows\system32即可

  3. SpringMVC 中 @ControllerAdvice 注解

    SpringMVC 中 @ControllerAdvice 注解 1.@ControllerAdvice 1.1 全局异常处理 1.2 全局数据绑定 1.3 全局数据预处理 原文地址: 江南一点雨:S ...

  4. 浅聊TCP的三次握手和四次挥手

    三次握手: 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资源.Client端接收到ACK报文后也向Server段发生ACK报文,并分配资源,这样TCP连 ...

  5. Scala类型参数(泛型)与隐式转换

    package com.yz9 import org.junit.Test import scala.collection.mutable.ListBuffer class test { @Test ...

  6. hdu5564 Clarke and digits

    Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submission ...

  7. Educational Codeforces Round 91 (Rated for Div. 2) C. Create The Teams (模拟)

    题意:有\(n\)个队员,每个队友都有一个能力值,构造队伍,要求队伍人数*队伍中最低能力值不小于\(x\),求能构造的最大队伍数. 题解:大水题,排个序,倒着模拟就行了. 代码: int t; int ...

  8. C#Assembly、程序集、装配件、命名空间以及类型的关系

    Assembly = 程序集 = 装配件 命名空间是类的逻辑组织形式,程序集是类的物理组织形式. 程序集其实和命名空间没有什么必然的联系. 程序集1: namespace1{ public class ...

  9. XV6学习(15)Lab mmap: Mmap

    代码在Github上. 这一个实验是要实现最基础的mmap功能.mmap即内存映射文件,将一个文件直接映射到内存当中,之后对文件的读写就可以直接通过对内存进行读写来进行,而对文件的同步则由操作系统来负 ...

  10. Leetcode(877)-石子游戏

    亚历克斯和李用几堆石子在做游戏.偶数堆石子排成一行,每堆都有正整数颗石子 piles[i] . 游戏以谁手中的石子最多来决出胜负.石子的总数是奇数,所以没有平局. 亚历克斯和李轮流进行,亚历克斯先开始 ...