Question

我正在构建大量相当基本的产品的目录，我需要能够使用一系列数字而不是完全匹配来过滤数据。

我循环浏览我的数据：

<input type=text" v-model="nameFilter">

<div v-for"product in products | filterBy nameFilter in 'name'>
    <p>Name: {{product.name}}</p>
    <p>Width: {{product.width}}</p>
    <p>Height: {{product.height}}</p>
</div>

现有的filterBy效果很好。没问题。但是，我还需要根据高度和宽度过滤掉产品，而不是精确值。如果我按精确值（例如，0.750）过滤，我可以让它工作，但如果可能的话，我需要根据范围过滤产品。

例如，假设我们有这个：

<select v-model="widthFilter">
    <option value="" selected>Filter by Width</option>
    <option value="0.000-0.999">0.000-0.999</option>
    <option value="1.000-1.999">1.000-1.999</option>
    <option value="2.000-2.999">2.000-2.999</option>
    ...
</select>

显然这不会按原样运作，但有没有办法在vue.js中过滤给出一系列数字的项目？

Answer 1

自定义过滤器非常有用。

＆＃13;

Vue.filter('range', function(width, range) {
	const widthInRange = [];
	for(let i of width) {
		if(i >= range[0] && i <= range[1]) widthInRange.push(i)
	}
	return widthInRange;
});
var data = {"width": [1, 2, 3, 4, 5, 6, 7]};
new Vue({
	el: "#obj",
	data: data
});

＆＃13;

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div id="obj">
	<span v-for="item in width|range [2,5]">{{item}}</span>
</div>

＆＃13;

如何在vue.js中过滤一系列数字

1 个答案: