Vue全家桶+SSR+Koa2全栈开发美团网：分别实现价格最低、人气最高、评价最高排序

<template>
  <div class="m-products-list">
    <dl>
      <dd
        v-for="item in nav"
        :key="item.name"
        :class="[item.name,item.active?'s-nav-active':'']"
        @click="Click_navSelect(item.name)"
      >
        {{ item.txt }}
      </dd>
    </dl>
    <ul>
      <Item
        v-for="(item,idx) in list"
        :key="idx"
        :meta="item"
      />
    </ul>
  </div>
</template>

<script>
import Item from './product.vue'
export default {
  components: {
    Item
  },
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      nav: [
        {
          name: 's-default',
          txt: '智能排序',
          active: true
        }, {
          name: 's-price',
          txt: '价格最低',
          active: false
        }, {
          name: 's-visit',
          txt: '人气最高',
          active: false
        }, {
          name: 's-comment',
          txt: '评价最高',
          active: false
        }
      ]
    }
  },
  async asyncData ({ app }) {
    const { data } = await app.$axios.get('searchList')
    // console.log(data.list)
    return { items: data.list }
  },
  methods: {
    Click_navSelect (type) {
      // console.log(type)
      const _this = this
      this.nav.forEach((item, index) => {
        item.active = false
        if (item.name === type) {
          _this.nav[index].active = true
          // console.log(_this.nav[index])
          _this.navSort(item.name)
        }
      })
    },
    navSort (type) {
      const _this = this
      const items = this.list
      switch (type) {
        case 's-price':
          items.sort(function (a, b) {
            return a.price - b.price
          })
          _this.list = items
          break
        case 's-visit':
          items.sort(function (a, b) {
            return b.rate - a.rate
          })
          _this.list = items
          break
        case 's-comment':
          items.sort(function (a, b) {
            return b.comment - a.comment
          })
          _this.list = items
          break
        default :
          break
      }
    }
  }
}
</script>

1、利用forEach 循环，排他思想；我先给所有的元素  active 设为false；在判断，是否匹配，匹配到了，获取对应下标，设置对应的元素 active 为true，同时，函数调用，传递参数

2、switch case 语句，判断，是否符合条件，执行对应的代码语句，sort() 方法了解一下

效果图：