大麦网列表页

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

一。大麦网列表页

要求：点击数据时对应数据会有高亮，且演唱会的内容会根据城市/分类进行切换(可以用到计算属性来做)

1.页面布局(:key="item.id"也可以写成:key="index",如果只是用来展示数据的话可以用index)

 <div class="root">
  <ul>
    <li>城市：</li>
    <li
      v-for="(item,index) in citys"
      :key="item.id"
      @click="changecity(index,item.id)"
      :class="{active:avtiveIndex==index}"
    >
      {{item.city}}
    </li>
  </ul>
  <ul>
    <li>分类：</li>
    <li
      v-for="(item,index) in types"
      :key="item.id"
      @click="changetype(index)"
      :class="{active:avtiveIndex1==index}"
    >
      {{item.type}}
    </li>
  </ul>
  <ol>
    <li v-for="(item,index) in full" :key="item.id">
      <div>
        <img :src="item.img" alt="" />
      </div>
      <div class="left">
        <p>{{item.title}}</p>
        <p>{{item.type}}</p>
        <p>{{item.city}}</p>
        <p>{{item.time}}</p>
      </div>
    </li>
  </ol>
</div>

2。页面样式

    * {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
  }
  ul {
    display: flex;
  }
  li {
    padding: 2px 10px;
    margin: 10px;
  }
  img {
    width: 150px;
    height: 200px;
  }
  ol > li {
    display: flex;
    border: 1px solid #ccc;
  }
  .left p {
    margin: 15px;
  }
  .active {
    background-color: lightsalmon;
  }
  

3.vue(用到了axios获取数据内容，以及异步等待，需要引入axios)

filer返回满足条件的内容形成一个新的数组，对原数组不会产生影响，所以只需要找到音乐会里的内容等于点击的内容并返回即可

   new Vue({
    el: ".root",
    data: {
      // 城市高亮索引
      avtiveIndex: 0,
      //   分类高亮索引
      avtiveIndex1: 0,
      //定义城市数组
      citys: [],
      //   定义分类数组
      types: [],
      //   定义演唱会内容数组
      lists: [],
    },
    methods: {

获取城市数据

      async city() {
        let { data } = await axios.get("./city.json");
        this.citys = data;
      },

获取分类数据

      async type() {
        let { data } = await axios.get("./type.json");
        this.types = data;
      },

获取演唱会内容数据

      async list() {
        let { data } = await axios.get("./show.json");
        this.lists = data;
      },
      changecity(index) {
        //   城市高亮索引等于对应的索引
        this.avtiveIndex = index;
      },
      changetype(index) {
        //   分类高亮索引等于对应的索引
        this.avtiveIndex1 = index;
      },
    },
    // 计算属性
    computed: {
      full() {
        //   定义一个空数组
        let data = [];

如果城市高亮索引大于0，返回演唱会内容中地点和点击的城市相等的数据

        if (this.avtiveIndex > 0) {
          data = this.lists.filter(
            (r) => r.city == this.citys[this.avtiveIndex].city
          );
        } else {
          // 否则data=lists数组的数据，也就是高亮索引为0的时候展示全部信息
          data = this.lists;
        }

如果演唱会索引大于0，会返回data中类型等于点击的类型的数据

        if (this.avtiveIndex1 > 0) {
          data = data.filter(
            (r) => r.type == this.types[this.avtiveIndex1].type
          );
        }
        // 最后返回data数组
        return data;
      },
    },
    // 页面创建完成
    created() {
      // 调用获取城市数据
      this.city();
      // 调用获取分类数据
      this.type();
      // 调用获取演唱会内容数据
      this.list();
    },
  })
    

全部数据

点击是根据点击的内容返回对应的数据