商品列表切换

<template>
  <div>
      <div class="rtop"> <button @click="qihuan">切换</button></div>
    <div>
      <GoodsCard
        v-show="isSow"
       v-for="(item,index) in list"
       :key="index"
       :itemLink="item.itemLink"
       :mainPic="item.mainPic"
       :title="item.title"
       :actualPrice="item.actualPrice"
       :originalPrice="item.originalPrice"
       :monthSales="item.monthSales"
       :couponLink="item.couponLink"
       />
       <div class="nav">
      <GoodsCards
      class="nav-list"
      v-show="!isSow"
       v-for="(item,index) in list"
       :key="index"
       :itemLink="item.itemLink"
       :mainPic="item.mainPic"
       :title="item.title"
       :actualPrice="item.actualPrice"
       :originalPrice="item.originalPrice"
       :monthSales="item.monthSales"
       :couponLink="item.couponLink"
       />
    </div>
    </div>
  </div>
</template>

<script>
import goods from "@/components/goodscard.vue";
import goods2 from "@/components/goodscard2.vue";
export default {
  components: {
    GoodsCard: goods,
    GoodsCards: goods2
  },
  data() {
    return {
      list: [],
      isSow:false
    };
  },
  created() {
    this.$axios
      .get("http://api.kudesoft.cn/tdk/goods", {
        params: {
          pageSize: 10,
          cids: 7
        }
      })
      .then(res => {
        console.log(res.data.data.data.list);
        this.list = res.data.data.data.list;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
      qihuan(){
          if(this.isSow){
              this.isSow=false 
          }else{
              this.isSow=true
          }
      }
  },
};
</script>

<style scoped>
.nav{
    width: 100%;
    display:flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
.nav-list{
    width: 50%;
    height: 200px;
}
.rtop{
    width: 100%;
    height: 50px;
    text-align: center;
}
</style>

没加注释抱歉！请多多谅解