zoukankan      html  css  js  c++  java
  • 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;
          });

        }
      }
    })

    实现功能

  • 相关阅读:
    CloudStack 4.2 与CloudStack 4.1二级存储API发生变化
    添加虚拟机磁盘扩容步骤
    NAT概述
    CloudStack全局参数
    在 Web 项目中应用 Apache Shiro
    使用 Spring Security 保护 Web 应用的安全
    获取浏览器的homepage
    剑指offer系列——2.替换空格
    剑指offer系列——1.二维数组中的查找
    JDK下载需要Oracle账号登录问题
  • 原文地址:https://www.cnblogs.com/DivHao/p/6773257.html
Copyright © 2011-2022 走看看