vue项目-数组处理

在vue项目实战

• 显示|隐藏
• 查询返回数组
• 过滤数组
• 数组去重
• 渲染列表

<template>
  <div>
    <h3>影院模块</h3>
    <button @click="showArea=!showArea">全城</button>
    <div v-show="showArea">
      <span @click="changeArea('all')">全部</span>
      <template v-for="item in areaList">
        <span @click="changeArea(item.districtId)" class="area" :key="item.districtId">{{item.name}}</span>
      </template>
    </div>

    <ul>
      <template v-for="(item,index) in cinemas">
        <li :key="index">{{item.name}}</li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 所有的影院,不能修改
      allCinemas: [],
      showArea: false,
      // 影院列表
      cinemas: [],
      // 区域列表
      areaList: []
    };
  },
  created() {
    this.getList();
  },

  methods: {
    async getList() {
      const url = "/cinema/getList";
      const res = await this.$http.get(url);
      this.allCinemas = res.cinemas;
      this.cinemas = res.cinemas;
      // 把影院数组里的district对象放进数组districts里
      const districts = res.cinemas.map(item => {
        return item.district;
      });
      // 去重
      this.areaList = this.quchong(districts);
    },

    /**
     * 去重的方法
     */
    quchong(districts) {
      // 定义一个新的数组,用来存放不重复的对象
      const list = [];
      districts.forEach(district => {
        // 到数组list里去查找有没有跟当前district对象一样的
        let index = list.findIndex(item => {
          return item.name === district.name;
        });
        // index为-1时,说明list没有跟当前区域对象一样的
        if (index === -1) {
          list.push(district);
        }
      });
      return list;
    },

    // 显示或隐藏区域列表
    // showAreaList() {
    //   this.showArea = !this.showArea;
    // },

    changeArea(districtId) {
      this.showArea = false;
      // 点击全部的时候,districtId为undefined
      if (districtId === "all") {
        this.cinemas = this.allCinemas;
      } else {
        // 根据id去过滤影院列表
        this.cinemas = this.allCinemas.filter(cinema => {
          return cinema.district.districtId === districtId;
        });
      }
    }
  }
};
</script>

<style scoped>
.area {
  background: green;
  margin-left: 10px;
  margin-top: 20px;
  cursor: pointer;
}
</style>

思路总结：在没有掌握全部技术的前提下怎么学习新的技术并且运用
思路:
了解需求(要达到什么效果)->根据自己现有的技能进行操作->碰到问题百度->看别人的解决方法->运用到自己的项目里
这个过程就是学习，而当问题解决了之后，可以看看有没有其他的方法，进行学习，这就是拓展
解决完问题用自己的话进行概述并表达出来，这便是总结
碰到问题第一得清醒，然后先把需求分析清楚，列出来，再挨个解决