vue的filter用法,检索内容
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用法,检索内容的更多相关文章
- vue之filter用法
1.全局写法: 全局过滤器必须写在vue实例创建之前. Vue.filter('testfilter', function (value,text) { // 返回处理后的值 return value ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue一个案例引发「内容分发slot」的最全总结
今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...
- Django 资源 与 知识 Django中自建脚本并使用Django环境 model中的save()方法说明 filter()用法
Django 资源 与 知识 Django中自建脚本并使用Django环境 model中的save()方法说明 filter()用法 2018/11/06 Chenxin 资料说明 Django基础入 ...
- Vue slot 插槽用法:自定义列表组件
Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...
- python3 filter用法(举例求0~n之间的素数)
在用python3求0~n之间的素数时,关于filter用法的有点模糊,于是上网查了一下filter用法. 求0~n之间素数的脚本prime.py: def f(x): plist = [0,0] + ...
- Ext.Net学习笔记12:Ext.Net GridPanel Filter用法
Ext.Net学习笔记12:Ext.Net GridPanel Filter用法 Ext.Net GridPanel的用法在上一篇中已经介绍过,这篇笔记讲介绍Filter的用法. Filter是用来过 ...
- checkbox在vue中的用法小结
关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...
- checkbox在vue中的用法总结
前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...
随机推荐
- ShowDoc,APIDoc,可道云API,语雀-适合IT企业的文档工具
ShowDoc,APIDoc,可道云API,语雀-适合IT企业的文档工具 一.ShowDoc官方文档及说明 1.1 它可以用来做什么 1.2 它都有些什么功能 1.3 使用在线的ShowDoc 1.4 ...
- Mycat安装并实现mysql读写分离,分库分表
Mycat安装并实现mysql读写分离,分库分表 一.安装Mycat 1.1 创建文件夹 1.2 下载 二.mycat具体配置 2.1 server.xml 2.2 schema.xml 2.3 se ...
- SpringBoot启动方式,Spring Boot 定义系统启动任务
SpringBoot启动方式,Spring Boot 定义系统启动任务 SpringBoot启动方式 1.1 方法一 1.2 方法二 1.2.1 start.sh 1.2.2 stop.sh 1.2. ...
- jvm 总体梳理
jvm 总体梳理 1.类的加载机制 1.1什么是类的加载 1.2类的生命周期 1.3类加载器 1.4类加载机制 2.jvm内存结构 JVM内存模型 2.1jvm内存结构 2.2对象分配规则 3.GC算 ...
- Spark练习之创建RDD(集合、本地文件),RDD持久化及RDD持久化策略
Spark练习之创建RDD(集合.本地文件) 一.创建RDD 二.并行化集合创建RDD 2.1 Java并行创建RDD--计算1-10的累加和 2.2 Scala并行创建RDD--计算1-10的累加和 ...
- MySQL数据库的逻辑架构和存储引擎
和其他数据库相比,MySQL数据库的架构与众不同,它的架构可以在多种不同的场景中应用并发挥良好的作用:主要体现在存储引擎上的架构上,插件式的存储引擎架构将查询处理和其他的系统任务以及数据存储提取相分离 ...
- pytest内核测试平台落地初体验
测试平台,有人说它鸡肋,有人说它有用,有人说它轮子,众说纷纭,不如从自身出发,考虑是否要做测试平台: 第1阶段,用Python+requests写接口自动化. 第2阶段,选择unitttest或pyt ...
- Vue.js到前端工程化
b站视频地址:黑马程序员Vue.js到前端工程化(webpack打包,以及Vue-cli3和Element-UI的使用) vue学习系列 1.vue概述 2.vue基本使用 3.vue模板语法 4.指 ...
- python自动化之使用allure生成测试报告
Allure测试报告框架帮助你轻松实现"高大上"报告展示.本文通过示例演示如何从0到1集成Allure测试框架.重点展示了如何将Allure集成到已有的自动化测试工程中.以及如何实 ...
- Aery的UE4 C++游戏开发之旅(5)字符&字符串
目录 TCHAR 字符 使用TEXT()宏包裹字符串字面量 转换字符编码 FString 字符串 FString 剖析 FString 使用 FName 字符串 FName 剖析 FName 使用 F ...