Vue是一種流行的JavaScript框架，它提供了一種簡單而優(yōu)雅的方法來構(gòu)建交互式Web應(yīng)用程序。使用Vue可以輕松地從DOM中獲取篩選框，以便執(zhí)行特定的過濾或排序操作。本文將介紹如何使用Vue獲取篩選框。

首先，我們需要在Vue實例中定義一個數(shù)據(jù)屬性來存儲篩選框的值。例如：

<script>
new Vue({
data: {
filterValue: ''
}
})
</script>

在上面的代碼中，我們定義了一個名為filterValue的數(shù)據(jù)屬性，并將其初始化為空字符串。

接下來，在我們的HTML模板中，我們需要將這個數(shù)據(jù)屬性綁定到篩選框的值屬性，這樣當(dāng)用戶輸入信息時，Vue會自動更新filterValue的值。例如：

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

在上面的代碼中，我們使用了Vue的雙向數(shù)據(jù)綁定語法v-model，將filterValue與輸入框的值綁定在一起。

現(xiàn)在，我們可以在Vue實例中使用filterValue這個屬性，執(zhí)行過濾或排序操作了。例如：

<script>
new Vue({
data: {
filterValue: '',
items: [
{ name: 'apple', price: 1 },
{ name: 'banana', price: 2 },
{ name: 'orange', price: 3 }
]
},
computed: {
filteredItems: function() {
return this.items.filter(function(item) {
return item.name.indexOf(this.filterValue) !== -1
})
}
}
})
</script>

在上面的代碼中，我們定義了一個名為filteredItems的計算屬性，它使用filter()方法來返回一個根據(jù)輸入框值過濾后的新列表。filter()方法接受一個回調(diào)函數(shù)，該函數(shù)在每個列表項上運行，并返回一個布爾值，指示該項是否應(yīng)該包含在新列表中。

最后，在我們的HTML模板中，我們可以使用v-for指令來渲染filteredItems列表。例如：

<ul>
<li v-for="item in filteredItems">
{{ item.name }} - {{ item.price }}
</li>
</ul>

在上面的代碼中，我們使用v-for指令來遍歷filteredItems列表，并為每個項顯示其名稱和價格。