<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() 方法了解一下
效果图: