vue3.0模糊查询简易版demo

<template>
  <div id="app">
    <input v-model="searchText" placeholder="输入搜索关键字" @input="filterData">
    <ul>
      <li v-for="item in filteredData" :key="item.id">
        <span v-html="highlightText(item.text)" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      searchText: '',
      data: [
        { id: 1, text: '苹果' },
        { id: 2, text: '香蕉' },
        { id: 3, text: '橙子' }
      // 添加更多数据
      ]
    }
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return item.text.toLowerCase().includes(this.searchText.toLowerCase())
      })
    }
  },
  methods: {
    highlightText(text) {
      console.log(text)
      const regex = new RegExp(this.searchText, 'gi')
      return text.replace(regex, match => `<span style="color: blue">${match}</span>`)
    },
    filterData() {
      // 在输入框输入时触发模糊查询
    }
  }
}
</script>

<style scoped>
.highlight {
  color: blue;
  font-weight: bold;
}
</style>