javascript – 如何使用Vue Slider控制元素

我在请求json对象中有一堆数据.默认情况下,所有数据都显示给用户.另外,我有一个滑块组件.我试图使功能,当用户移动滑块时,json的元素根据滑块的值显示/消失.

例如：

数据：

requests:  [
              {value: 10,name: "foo"},{value: 12,name: "bar"},{value: 14,name: "foobar"},{value: 22,name: "test"},{value: 1,name: "testtooo"},{value: 8,name: "something"}
            ]

默认情况下,我希望显示所有数据,但是当用户移动滑块时,我只希望显示的数据值大于滑块的当前值.

我在这里制作了一个JS小提琴：https://jsfiddle.net/hvb9hvog/9/

题

如何根据滑块的值修改请求json？

解决方法

为filteredRequests创建另一个计算属性.

filteredRequests(){
    return this.requests.filter(r => r.value > this.num)
 }

并使用它来列出请求.

<li v-for="request in filteredRequests">

Updated fiddle.

原文地址：https://www.jb51.cc/js/157750.html