vue过滤器

一般我们写这个功能基本上就是往后端传个参数，然后后端再返回给我们搜索后的内容，今天我们要实现的是在自己的json数据里去搜索得到我们想要的内容。

<template><div><ul><li v-for="value in searchData"><div class="imgDiv" v-for="(imgsrc,index) in value.picPath">                   <img v-if='index === 0' :src=imgsrc alt="value.name" class="avatar">                </div>                <p class="listName">{{value.name}}</p>                <p class="listName listName1">￥{{value.price}}</p></li><div class = "noContent" v-if="len === 0"><img src='../assets/none.png'></div></ul></div></template>

模板里面基本就是这个样子

<script>export default {  name: 'list',  data: function () {    return {      search: '',      myData: [],      url: '/static/product/all.json'    }  },  mounted: function () {    this.getData()  },  computed: {    searchData: function () {      var search = this.search      if (search) {        return this.myData.filter(function (list) {          return Object.keys(list).some(function (key) {            return String(list[key]).toLowerCase().indexOf(search) > -1          })        })      }      return this.myData    },    len: function () {      return this.searchData.length    }  },  methods: {    getData: function () {      this.$http.get(this.url).then((response) => {        this.myData = response.data.list        this.search = this.$route.query.serInfo      })    }  },  watch: {    '$route': 'getData'  }}</script>

这里面最主要的是searchData这个函数的功能，其他的就是我们去请求到我们json数据，然后在请求到的myData里面去搜索，在模板里面循环的时候记得是

v-for="value in searchData"

这里还有一个一个问题就是在页面上我们搜索第一次是生效的，但是之后就没有反应了，原因就是

this.search = this.$route.query.serInfo

没有执行，所以我们加上了watch这个钩子，来检测页面的url传过来的参数变化。