Vue 2 - 揭秘搜索关键词高亮的神奇魔法，让你眼前一亮

前端

2023-06-28 17:30:36

Vue 2 点亮搜索关键词：让你的应用程序大放异彩

各位前端开发大神们，欢迎来到 Vue 2 的魅力世界！这款前端开发的璀璨之星，不仅能够打造出令人惊叹的应用程序，还为我们提供了实现搜索关键词高亮的强大功能。准备好了吗？让我们一起踏上点亮搜索之旅！

关键词高亮的秘诀：一步步揭晓

想要实现关键词高亮，你需要掌握以下三步秘诀：

数据准备： 为你的搜索组件备好数据，包括原始数据和经过处理的数据。
高亮代码： 这是魔法的关键所在！使用 Vue 2 提供的 v-html 指令，将经过处理的数据渲染到模板中。
美化展示： 别忘了给你的关键词高亮添加一些视觉上的点缀，让它更加赏心悦目。

实战演练：见证关键词高亮的诞生

引入 Vue.js： 首先，你需要在你的项目中引入 Vue.js，它是实现关键词高亮的基石。
准备组件： 创建 Vue 组件，用于处理搜索关键词高亮的功能。
定义数据： 在你的组件中定义必要的 data，包括原始数据和经过处理的数据。
渲染模板： 使用 v-html 指令将经过处理的数据渲染到模板中。
添加样式： 别忘了给你的关键词高亮添加一些样式，让它脱颖而出。

代码示例：

<template>
  <div>
    <input type="text" v-model="searchQuery" />
    <ul>
      <li v-for="item in items" :key="item.id">
        <span v-html="highlight(item.name)"></span>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
      ],
    };
  },
  methods: {
    highlight(name) {
      const regex = new RegExp(`(${this.searchQuery})`, 'gi');
      return name.replace(regex, `<mark>$1</mark>`);
    },
  },
};
</script>