vue如何實現(xiàn)輸入框搜索功能

在Vue中實現(xiàn)輸入框搜索功能也有多種方法，以下是其中一種常見的做法：

1. 創(chuàng)建一個Vue組件，用于處理搜索邏輯和展示搜索結(jié)果。

<template>
  <div>
    <input v-model="searchText" @input="handleSearch" placeholder="輸入關(guān)鍵字搜索">
    <ul>
      <li v-for="item in searchResults" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchText: '',
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
  computed: {
    searchResults() {
      if (this.searchText) {
        return this.list.filter(item => {
          return item.name.toLowerCase().includes(this.searchText.toLowerCase());
        });
      } else {
        return this.list;
      }
    },
  },
  methods: {
    handleSearch() {
      // 可以在這里進(jìn)行其他處理，例如發(fā)送網(wǎng)絡(luò)請求獲取搜索結(jié)果
    },
  },
};
</script>

在上面的示例中，我們使用了一個輸入框（<input>）來獲取用戶的搜索關(guān)鍵字，并使用v-model指令將輸入框的值綁定到searchText數(shù)據(jù)屬性上。

在computed計算屬性中，我們根據(jù)searchText的值對列表項進(jìn)行過濾。如果searchText不為空，則使用filter()方法來過濾列表項，只顯示包含搜索關(guān)鍵字的項；如果searchText為空，則返回完整列表。

在模板中使用v-for指令遍歷searchResults，并通過:key綁定每個列表項的唯一標(biāo)識符。

可以根據(jù)需要自定義樣式、添加更多搜索條件或使用其他方法來實現(xiàn)輸入框搜索功能。另外，在handleSearch方法中，你可以進(jìn)行其他處理，例如發(fā)送網(wǎng)絡(luò)請求獲取搜索結(jié)果。