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. vue3.0初尝试

  2. Cobbler 自动化部署 (转载)

    https://www.cnblogs.com/linuxliu/p/7668048.html root默认密码为 123456 (建议修改) ks文件 #platform=x86, AMD64, o ...

  3. js文字颜色闪烁

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 对项目版本自动控制——利用gitversion

    对项目版本自动控制--利用gitversion 目录 对项目版本自动控制--利用gitversion 1 为什么需要自动版本控制 2 如何使项目版本一目了然 3 Dot Net Core,程序集中的版 ...

  5. sentinel流量控制和熔断降级执行流程之源码分析

    前言: sentinel是阿里针对服务流量控制.熔断降级的框架,如何使用官方都有很详细的文档,下载它的源码包 里面对各大主流框都做了适配按理,本系列文章目的 主要通过源码分析sentinel流量控制和 ...

  6. 2021年的十五个DevOps趋势预测

    DevOps已经走过了很长的一段路,毫无疑问,它将在今年继续闪耀.由于许多公司都在寻找围绕其数字化转型的最佳实践,因此了解领导者认为该行业的发展方向非常重要.从这个意义上说,下面的文章收集了DevOp ...

  7. Java创建线程四种方式

    1.继承Thread类 public class MyThread extends Thread { public MyThread() { } public void run() { for(int ...

  8. Codeforces Round #626 (Div. 2) D. Present(位运算)

    题意: 求n个数中两两和的异或. 思路: 逐位考虑,第k位只需考虑0~k-1位,可通过&(2k+1-1)得到一组新数. 将新数排序,当两数和在[2k,2k+1)和[2k+1+2k,2k+2)之 ...

  9. Codeforces Round #625 (Div. 2, based on Technocup 2020 Final Round) B. Journey Planning(映射)

    题意: 已知 n 所城市(从 1 至 n 编号)及其美丽值,选取一条旅行路线,满足路线中两两城市美丽值之差等于编号之差,求所有旅行路线中美丽值的最大值. 思路: 美丽值与编号作差,差值为键,映射累加 ...

  10. B. Queue

    During the lunch break all n Berland State University students lined up in the food court. However, ...