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;
          });

        }
      }
    })

    实现功能

  • 相关阅读:
    Windows环境下OpenLDAP安装配置
    jobcenter在Windows下连携LDAP
    OpenLDAP搭建
    Go 函数 #3
    Go 数组/多维数组/切片/map #2
    Go内置类型/变量/常量 #1
    git常用命令
    makefile基础_1
    kubernete的service
    配置开发环境
  • 原文地址:https://www.cnblogs.com/DivHao/p/6773257.html
Copyright © 2011-2022 走看看