Javascript 在vue.js 2中按所选选项筛选列表

我正在尝试vue.js，但无法真正理解如何通过在框中选择一个选项来过滤呈现的项目列表

每个列表项都有一个pric属性。例如200美元、500美元、600美元等

我的选择框选项每个都有一个价格范围。例如0-250美元，250-500美元，500-750美元

例如，当我在选择框中选择$200-$500时，我只希望列表中价格介于该范围之间的项目可见

html:

模板：

<li v-for="(item, index) in items">
    {{ item.price }} // some price in $. eg. $ 340. different for each 
item
</li>

---

因为我第一次误解了这个问题，所以我更新了原来的答案。 总之，是一个JSFIDLE，它实现了我相信您正在尝试的功能

 Vue.filter('currency', function (value) {
    return '€ ' + parseFloat(value).toFixed(2);
});

var demo = new Vue({
    el: '#demo',
    data: {
        items: [5,20],
        limits: [{min: 1, max: 10}, {min:11, max: 25}, {min:26, max: 50}],
        option: 0
    },
    computed: {
        selectedList () {
        var ul = [];
        for(i =0; i < this.items.length; i++) {
            if (this.items[i] > this.limits[this.option].min && this.items[i] < this.limits[this.option].max) {
            ul.push(this.items[i])
          }
        }
        return ul;
      }
    }
})

我已将您的最小/最大值放置在一个数组中，以便我们可以使用select元素循环这些值。当我们创建一个计算数组时，该数组返回所选最小值/最大值之间的所有值

---

我还添加了一个过滤器来添加货币符号。

听起来不错。但我如何将其应用到选择框中呢？嗯，不太可能。正如您在我的代码中看到的，我的select中的数据现在是静态字符串。无论您在选择中选择什么，我的选择中这两个数字之间的所有项目都应该是可见的！第一把小提琴正是我需要的。最后一个问题！我的应用程序从一个静态json文件加载数据，这使得计算机无法访问该文件。如何解决这个问题？我现在尝试使用v-on:change=filterFunc，但是if语句不起作用。

 Vue.filter('currency', function (value) {
    return '€ ' + parseFloat(value).toFixed(2);
});

var demo = new Vue({
    el: '#demo',
    data: {
        items: [5,20],
        limits: [{min: 1, max: 10}, {min:11, max: 25}, {min:26, max: 50}],
        option: 0
    },
    computed: {
        selectedList () {
        var ul = [];
        for(i =0; i < this.items.length; i++) {
            if (this.items[i] > this.limits[this.option].min && this.items[i] < this.limits[this.option].max) {
            ul.push(this.items[i])
          }
        }
        return ul;
      }
    }
})