vue模糊查询关键字加颜色-前端问答-PHP中文网

vue模糊查询关键字加颜色

WBOY

发布： 2023-05-27 17:43:39

原创

626人浏览过

vue是一种非常流行的javascript框架，它的一个重要功能是让开发者能够轻松地构建交互式和动态的web应用程序。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中文网其它相关文章！