vue 按条件筛选 坊商品

<template>

  <div>

    <div>

      <ul style="display:flex;">

        {{search}}

        <ul class="citys">城市：</ul>

        <ul class="citys" style="margin-left:10px;" v-for="(item,index,key) in city" :key="index+'st'"

          :class='{box2:index==activeindex}' @click='changeIndex(index,key)'>

          <ul>{{item.city}}</ul>

        </ul>

      </ul>

      <ul style="display:flex;margin-top:100px;">

        <ul class="citys">分类：</ul>

        <ul class="citys" style="margin-left:10px;" ref='geogra' v-for="(item,index) in geogra" :key="index+'1'"

          :class='{box2:index==activeindex1}' @click='changeIndex1(index)'>

          <ul>{{item.geogra}}</ul>

        </ul>

      </ul>

      <ul v-for="(item,index) in change" :key="index">

        <span>{{item.city}} </span>

        <ul>{{item.geogra}}</ul>

        <ul><img :src="item.img" alt=""></ul>

      </ul>

      <div v-if='s'>没有符合条件的数据</div>

    </div>

  </div>

</template>

<script>

  export default {

    name: 'filters',

    data() {

      return {

        s: false,

        activeindex: '',

        activeindex1: '',

        search: '',

        searchs: '',

        awm: '',

        arr: [],

        arrs: [],

        city: [{

            city: '全部'

          }, {

            city: '上海'

          },

          {

            city: '苏州'

          },

          {

            city: '杭州'

          },

          {

            city: '无锡'

          },

          {

            city: '大洋洲'

          },

        ],

        arrw: [],

        geogra: [{

            geogra: '类型'

          },

          {

            geogra: '相声'

          },

          {

            geogra: '说唱'

          },

          {

            geogra: '发布会'

          },

          {

            geogra: '演唱会'

          }

        ],

        cyties: {

          city: '',

          geogra: '',

        },

        list: [{

            id: 0,

            city: '上海',

            geogra: '演唱会',

            img: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg'

          },

          {

            id: 1,

            city: '上海',

            geogra: '发布会',

            img: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg'

          },

          {

            id: 2,

            city: '无锡',

            geogra: '发布会',

            img: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3892521478,1695688217&fm=26&gp=0.jpg'

          },

          {

            id: 3,

            city: '苏州',

            geogra: '演唱会',

            img: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4018557288,1217151095&fm=26&gp=0.jpg'

          },

          {

            id: 4,

            city: '杭州',

            geogra: '相声',

            img: 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg'

          },

          {

            id: 5,

            city: '大洋洲',

            geogra: '说唱',

            img: 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg'

          },

        ]

      }

    },

    watch: {

      change(value) {

        if (value == '') {

          this.s = true

        } else {

          this.s = false

        }

      }

    },

    computed: {

      change() {

        return this.list.filter(item => {

          if (this.search == '全部' && this.searchs == '类型') {

            return this.list

          } else if (this.search == '全部' && JSON.stringify(item).indexOf(this.searchs) > -1) {

            return this.list

          } else if (JSON.stringify(item).indexOf(this.search) > -1 && this.searchs == '类型') {

            return this.list

          } else if (!this.search && !this.searchs) {

            return this.list

          } else if (JSON.stringify(item).indexOf(this.search) > -1 && !this.searchs) {

            return this.list

          } else if (JSON.stringify(item).indexOf(this.searchs) > -1 && !this.search) {

            return this.list

          } else if (item.geogra == this.searchs && item.city == this.search) {

            return this.list

          }

        })

      }

 

    },

    methods: {

      changeIndex(index) {

        let city = this.city

        this.search = city[index].city //获取城市地方

        this.activeindex = index

      },

      changeIndex1(index) {

        this.activeindex1 = index

        this.searchs = this.geogra[index].geogra

      },

    }

  }

</script>

<style lang="less" scoped>

  .city {

    display: flex;

  }

 

  .img {

    display: flex;

  }

  .citys {

    width: 100px;

    height: 50px;

    line-height: 50px;

    text-align: center;

  }

  .box2 {

    width: 100px;

    height: 50px;

    line-height: 50px;

    background: pink;

    color: #fff;

  }

</style>