溫馨提示×

vue如何實現搜索框模糊查詢

vue
小億
359
2023-08-04 13:40:52
欄目: 編程語言

在Vue中實現搜索框的模糊查詢可以使用以下步驟:

1. 在Vue組件的data屬性中定義一個變量來存儲搜索關鍵字,例如searchKeyword。

2. 在模板中添加一個輸入框用于輸入搜索關鍵字,并將它的值綁定到searchKeyword變量上,例如:

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

3. 對要進行模糊查詢的數據進行過濾??梢允褂肰ue的計算屬性來實現這個過濾邏輯。首先將需要進行查詢的數據存儲在一個數組中。然后創建一個計算屬性,返回過濾后的結果。例如:

 <template>

     <div>

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

       <ul>

         <li v-for="item in filteredItems">{{ item }}</li>

       </ul>

     </div>

   </template>

   <script>

   export default {

     data() {

       return {

         searchKeyword: '',

         items: ['apple', 'banana', 'cherry', 'date']

       }

     },

     computed: {

       filteredItems() {

         return this.items.filter(item => {

           return item.includes(this.searchKeyword);

         });

       }

     }

   }

   </script>

   在上述代碼中,filteredItems計算屬性返回了一個過濾后的結果數組,只包含那些包含搜索關鍵字的項。

4. 最后,通過在模板中使用`v-for`指令循環遍歷filteredItems數組,并展示查詢結果。

這樣,當用戶在搜索框中輸入關鍵字時,只有包含該關鍵字的項會顯示出來,實現了模糊查詢的效果。


0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女