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实现过滤的更多相关文章

  1. Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

  2. vue1.0和vue2.0的区别(二)

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  4. vue2.0自学笔记

    前言: 一.优点: 轻量级.高效率.上手快.简单易学.文档全面而简洁 二.功能: 1.模板渲染 2.模块化 3.扩展功能:路由.Ajax 三.课程包含: 1.Vue实例 2.Vue组件 3.Vue指令 ...

  5. 再读vue2.0

    玩过一段时间后在来读读vue2.0会发现受益良多 概述: vue2.0 是一套构建用户界面的渐进式框架, 使用virtual DOM  提供了响应式和组件化, 允许使用简介的模板语法来声明式的将数据渲 ...

  6. 重开Vue2.0

    目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加 ...

  7. vue2.0过滤器

    最近一阶段,项目上比较清闲,有了更多的时间可以研究一下vue了. 这里记录一下关于vue2.0过滤器的学习. vue2.0删除了所有的框架自带的过滤器,也就是说,如果你在vue2.0当中想用过滤器,那 ...

  8. VUE2.0学习总结

    摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...

  9. Vue2.0以后,有哪些变化

    最近移动端项目版本升级,Vue由之前的1.0升级到2.3,那么,Vue2.0之后,有哪些细节的变化呢,现在总结如下: 1.在每个组件模板,不再支持片段代码 组件中模板: 之前: <templat ...

随机推荐

  1. 【代码笔记】Web-CSS-CSS Table(表格)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. IBM Watson启示录:AI不应该仅仅是炫技

    IBM Watson启示录:AI不应该仅仅是炫技 https://mp.weixin.qq.com/s/oNp8QS7vQupbi8fr5RyLxA                         导 ...

  3. 在Office应用中打开WPF窗体并且让子窗体显示在Office应用上

    在.NET主程序中,我们可以通过创建 ExcelApplication 对象来打开一个Excel应用程序,如果我们想在Excle里面再打开WPF窗口,问题就不那么简单了. 我们可以简单的实例化一个WP ...

  4. iPad----------教你如何查询ipad型号

    1.首先进入苹果官网 找到support    https://support.apple.com 2.找到查询ipad型号的地方  点击Check  coverage for your produc ...

  5. Python使用Plotly绘图工具,绘制散点图、线形图

    今天在研究Plotly绘制散点图的方法 使用Python3.6 + Plotly Plotly版本2.0.0 在开始之前先说说,还需要安装库Numpy,安装方法在我的另一篇博客中有写到:https:/ ...

  6. 以太坊智能合约 Solidity 的常用数据类型介绍

    目录 目录 1.数组 1.1.对数组的增删改查操作. 2.String.Bytes.Mapping的使用 3.Enums 和 Structs 的简单应用 4.Ether 单位和 Time 单位 5.A ...

  7. sqlserver 学习之分离与附加数据库

    在学习sqlserver数据库的过程中,我们会学习到有关一些听起来比较陌生的专用名词,比如说分离与附加这两个专有名词,对于我来说就是比较陌生的.好的,下面我们一起来学习一下吧.为了讲的通俗一点,下面以 ...

  8. c/c++ 网络编程 UDP up/down 网卡

    网络编程 UDP up/down 网卡 在程序里动态改变网卡的状态.注意:程序运行需要root权限. 程序运行的方法: sudo ./a.out 1,关闭网卡 #include <stdio.h ...

  9. SQLServer之创建DML AFTER INSERT触发器

    DML AFTER INSERT触发器创建原理 触发器触发时,系统自动在内存中创建deleted表或inserted表,内存中创建的表只读,不允许修改,触发器执行完成后,自动删除. insert触发器 ...

  10. leetcode 203. Remove Linked List Elements 、83. Remove Duplicates from Sorted List 、82. Remove Duplicates from Sorted List II(剑指offer57 删除链表中重复的结点)

    203题是在链表中删除一个固定的值,83题是在链表中删除重复的数值,但要保留一个:82也是删除重复的数值,但重复的都删除,不保留. 比如[1.2.2.3],83题要求的结果是[1.2.3],82题要求 ...