vue 搜索框模糊查询 + 优化(节流) + 关键字高亮

最新推荐文章于 2024-10-10 00:22:48 发布

我仰泳一级棒

最新推荐文章于 2024-10-10 00:22:48 发布

阅读量3.9k

点赞数 12

分类专栏：项目开发历程文章标签： vue javascript css3

本文链接：https://blog.csdn.net/like_js/article/details/112535364

版权

本文展示了如何在Vue中实现搜索框的模糊查询功能，并结合CSS3进行关键字高亮显示。通过使用计算属性(computed)优化查询逻辑，确保性能。文章附带完整代码示例。

摘要由CSDN通过智能技术生成

直接上代码

HTML视图层代码

<template>
   <!-- 模糊查询 + 节流 + 高亮 -->
  <div>
    <input
      type="text"
      placehold="请输入id进行查询"
      v-model="inputValue"
      ref="input"
      @keyup="goSearch"
    />
    <!-- 这里v-show比v-if省性能 -->
    <div
      class="conten"
      v-show="isShow"
    >
      <div
        class="contenlist"
        v-for="(item,index) in list"
        :key="index"
      >
        <!-- <span>{
   {item.id}}</span> -->
        <!-- <span>{
   {item.name}}</span> -->
        <!-- <span>{
   {item.time}}</span> -->
        <span v-html="item.id"></span>
        <span v-html="item.name"></span>
        <span v-html="item.time"></span>
      </div>
    </div>
</template>

js数据逻辑层代码：

<script>
// import _ from 'lodash'
export default {
   
  data () {
   
    return {
   
      inputValue: "",
      isShow: false,
      statu: true,
      dataList: [
        {
    id: "9527", name: "刘一", time: "2020-07-10" },
        {
    id: "9528", name