vue模糊查詢關鍵字加色

Vue是一種非常流行的JavaScript框架，它的一個重要功能是讓開發者能夠輕鬆地建立互動式和動態的網路應用程式。 Vue的模糊查詢功能讓搜尋變得非常方便，同時也可以幫助開發者提升使用者體驗。本文將主要介紹Vue模糊查詢中關鍵字加色的實作方法。

模糊查詢是指在資料集合中，透過輸入一定條件（如文字、數字、日期等）後，能搜尋出與該條件相符的資料。在Vue中，我們可以使用v-model來綁定一個輸入框，然後透過computed屬性進行搜尋。具體實現如下：

<template>
  <div>
    <input type="text" v-model="keyword"/>
    <ul>
      <li v-for="item in filteredData">{{ highlight(item) }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: [
        {id: 1, name: 'Apple'},
        {id: 2, name: 'Banana'},
        {id: 3, name: 'Orange'},
        {id: 4, name: 'Watermelon'},
        {id: 5, name: 'Grape'},
      ],
      keyword: ''
    }
  },
  computed: {
    filteredData () {
      return this.data.filter(item => item.name.toLowerCase().includes(this.keyword.toLowerCase()))
    }
  },
  methods: {
    highlight (item) {
      const regex = new RegExp(this.keyword, 'gi')
      return item.name.replace(regex, `<span class="highlight">${this.keyword}</span>`)
    }
  }
}
</script>

<style>
.highlight {
  color: red;
}
</style>

上述程式碼中，我們首先綁定了一個輸​​入框，然後在v-for指令中透過computed屬性過濾數據，篩選出與keyword相符的資料。接著，我們定義了一個highlight方法，利用正規表示式將關鍵字包裹在HTML標籤內並添加樣式。最後，在定義的樣式表中，我們為highlight類別設定了顏色。

要注意的是，為了防止XSS漏洞，應該使用Vue的v-html指令或DOMPurify函式庫來渲染HTML標籤。

總結來說，Vue的模糊查詢功能非常方便，讓搜尋變得非常靈活，而關鍵字加上色彩功能則能進一步提升使用者體驗。實作方法也相對簡單，只需要定義一個highlight方法。開發者可以根據自己的需求進行更改和最佳化。

以上是vue模糊查詢關鍵字加色的詳細內容。更多資訊請關注PHP中文網其他相關文章！