vue2.0实现过滤
vue1.0和vue2.0差别还是挺多的,之前的vue1.0还有过滤器功能,到了2.0过滤器只能通过自己编写。以下是写的一个小demo:
HTML
<div id="app">
<div>
过滤搜索<input type="text" value="" placeholder="搜 索" v-model="key">
</div>
<!-- 服务列表 -->
<ul class="service-list-con">
<li class="service-list" v-for="serviceList in fliterList">
<a :href="serviceList.serviceLink">
<span v-text="serviceList.serviceName"></span>
</a>
</li>
</ul>
</div>
JavaScript
var data = {
serviceList : [
{
serviceLink :"www.baidu.com",
serviceName : "我是百度"
},
{
serviceLink :"https://www.google.com.hk",
serviceName : "我是谷歌"
},
{
serviceLink :"https://www.taobao.com",
serviceName : "我是淘宝"
},
{
serviceLink :"https://www.jd.com",
serviceName : "我是京东"
}
],
key : "",
}
var vm = new Vue({
el : "#app",
data : data,
computed : {
fliterList : function(){
var key = this.key;
var serviceList = this.serviceList;
return serviceList.filter(function(serviceList) {
return serviceList.serviceName.indexOf(key) != -1;
});
}
}
})
实现功能


vue2.0实现过滤的更多相关文章
- Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
- vue1.0和vue2.0的区别(二)
这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- vue2.0自学笔记
前言: 一.优点: 轻量级.高效率.上手快.简单易学.文档全面而简洁 二.功能: 1.模板渲染 2.模块化 3.扩展功能:路由.Ajax 三.课程包含: 1.Vue实例 2.Vue组件 3.Vue指令 ...
- 再读vue2.0
玩过一段时间后在来读读vue2.0会发现受益良多 概述: vue2.0 是一套构建用户界面的渐进式框架, 使用virtual DOM 提供了响应式和组件化, 允许使用简介的模板语法来声明式的将数据渲 ...
- 重开Vue2.0
目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加 ...
- vue2.0过滤器
最近一阶段,项目上比较清闲,有了更多的时间可以研究一下vue了. 这里记录一下关于vue2.0过滤器的学习. vue2.0删除了所有的框架自带的过滤器,也就是说,如果你在vue2.0当中想用过滤器,那 ...
- VUE2.0学习总结
摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...
- Vue2.0以后,有哪些变化
最近移动端项目版本升级,Vue由之前的1.0升级到2.3,那么,Vue2.0之后,有哪些细节的变化呢,现在总结如下: 1.在每个组件模板,不再支持片段代码 组件中模板: 之前: <templat ...
随机推荐
- pd_ds中的hash
前言 在c++的STL中,提供了一种hash函数,其用法和map是几乎一样的,但是速度却能快接近一倍 使用方法 需要的头文件 #include<ext/pb_ds/assoc_container ...
- 用WijmoJS搭建您的前端Web应用 —— React
前文回顾 在本系列文章中,我们已经介绍了Angular和Vue框架下 WijmoJS 的玩法. 而今天,我们将展示如何使用 WijmoJS 来搭建一款具备独特创新性.出色性能和简单代码逻辑的 Reac ...
- 三、View的事件体系
1.View基础知识 1.1.什么是View View是Android中所有控件的基类.View是一种界面层的控件的一种抽象,代表了一个控件.除了View,还有ViewGroup,内部包含了许多个控件 ...
- Java新知识系列 七
抽象类和接口的区别和特点 java的JDK中包含的五个工具 编译型语言和解释型语言 Java和C++的区别` 常见的ASCII的值 Forward和Redirect之间的对比 Web Service ...
- (办公)SpringBoot和swagger2的整合.
因为开发项目的接口需要给app,小程序测试,所以用swagger. 1.pom.xml: <dependency><!--添加Swagger依赖 --> <groupId ...
- C#基础学习第一天
..net与C# .NET是一个框架.一种平台.一种技术 C#是一种编程语言,可以开发基于.NET平台的应用 .NET能干什么 Winform ASP.NET Wwb wphone Unity3D游戏 ...
- 启动期间的内存管理之引导分配器bootmem--Linux内存管理(十)
在内存管理的上下文中, 初始化(initialization)可以有多种含义. 在许多CPU上, 必须显式设置适用于Linux内核的内存模型. 例如在x86_32上需要切换到保护模式, 然后内核才能检 ...
- 本地windows下搭建git的本地服务器
本地windows下搭建git的本地服务器 准备工作: 本地安装java环境,配置环境变量(略) 下载gitblit文件,百度一大堆 开始第一步: 减压gitblit压缩包到某个目录下,比如我在:H: ...
- LeetCode算法题-Minimum Moves to Equal Array Elements(Java实现)
这是悦乐书的第233次更新,第246篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第100题(顺位题号是453).给定大小为n的非空整数数组,找到使所有数组元素相等所需的 ...
- 英语口语练习系列-C05-水电
<登幽州台歌>·陈子昂 陈子昂(公元659-公元700年),唐代文学家,初唐诗文革新人物之一. Num 诗句 1 前不见古人, 2 后不见来者. 3 念天地之悠悠, 4 独怆然而涕下! T ...