按imgRatio
排序的示例:
<p v-for="result in resultsFiltered | orderBy 'imgRatio'">{{ result.imgRatio }}</p>
或
<p v-for="result in resultsFiltered">{{ result.imgRatio }}</p>
computed: {
resultsFiltered() {
if (this.sliderVal == 0) {
return this.results.sort((a,b) => { return b.imgRatio - a.imgRatio;});
} else {
const obj = [];
const arr = [];
for (let i = 0; i < this.ratioIndeces.length; i++) {
const element = this.ratioIndeces[i];
obj.push(this.results[element]);
arr.push(this.imgProperties.imgRatio[element]);
}
return this.obj.sort((a,b) => { return b.imgRatio - a.imgRatio;});
}
}
},
对于Vue2,您可以在here上引用
,
如果您的计算属性使用数据属性来控制排序,则可以这样做。首先,我创建了包含原始未排序数据和当前排序的数据:
data: {
origItems:[
{name:'ray',age:10},{name:'apple',age:20},{name:'zula',age:9},],sortType:''
},
然后,我将计算结果构建为基于sortType的返回值:
computed:{
items() {
if(this.sortType === '') return this.origItems;
if(this.sortType === 'name') {
return this.origItems.sort((a,b) => {
if(a.name < b.name) return -1;
if(a.name > b.name) return 1;
return 0;
});
}
if(this.sortType === 'age') {
return this.origItems.sort((a,b) => {
if(a.age < b.age) return -1;
if(a.age > b.age) return 1;
return 0;
});
}
}
这可能写得更紧。我使用此布局进行测试:
<div id="app" v-cloak>
<button @click="sort('name')">Sort by Name</button>
<button @click="sort('age')">Sort by Age</button>
<ul>
<li v-for="item in items">{{ item.name}} - {{ item.age }}</li>
</ul>
</div>
您可以在此处查看在线示例:https://codepen.io/cfjedimaster/pen/eYYMVWr?editors=1011
,
这是我同时按参数过滤结果和排序的最新方法:
computed: {
resultsFiltered () {
return this.built.dataset.filter(img => {
return this.customFilters.every(key => {
const parameter = this.params[key]
const args = parameter.map(val => this.customInputs[val]).slice(1)
return filterMenus[key](img[parameter[0]],...args)
})
}).sort(this.sortings[this.sortDirection][this.sortType])
}
},
单个元素:
built.datatset
= 是一个对象数组。每个 img 都是一个对象。
customFilters
= 是一个带有过滤选项的数组。如“比率”或“关键字”。因此,我可以使用列表中的每个键进行过滤。
customInputs
= 用户输入的任何内容。日期范围、比率、关键字、年份……
sortings
= 比较 img1 和 img2
sortDirection
= 向上或向下。像'img2.ratio - img1.ratio'
sortType
= 字母、数字、日期或重置为默认视图
本文链接:https://www.f2er.com/3155694.html