vue如何实现模糊查询

在Vue中实现模糊查询的方法有很多种，以下是一种简单的实现方法：

首先，在Vue的data中定义一个属性，用来存储用户输入的查询关键字：

data() {
  return {
    query: ''
  }
}

然后，在模板中使用v-model指令将用户输入的关键字绑定到这个属性上：

<input type="text" v-model="query">

接下来，在Vue的计算属性中定义一个方法，用来过滤需要显示的数据：

computed: {
  filteredData() {
    return this.dataList.filter(item => {
      return item.name.toLowerCase().indexOf(this.query.toLowerCase()) !== -1
    })
  }
}

这个方法会遍历数据列表，找到所有名称中包含查询关键字的项，并将它们返回。

最后，在模板中使用v-for指令循环渲染过滤后的数据：

<ul>
  <li v-for="item in filteredData">{{ item.name }}</li>
</ul>

这样，用户输入关键字后，就会实时过滤需要显示的数据。

相关问题

springboot+mybatisplus+vue实现模糊查询

首先，在前端页面上添加一个输入框用于输入搜索关键字，并且在点击搜索按钮时将关键字传递到后端。

然后，在后端的控制器中，接收前端传递的关键字参数，并且调用MyBatisPlus提供的模糊查询API进行查询。

具体实现步骤如下：

1.前端页面实现

在前端页面上添加一个输入框和搜索按钮，当用户在输入框输入了关键字并点击搜索按钮时，将关键字传递到后端。

<template>
  <div>
    <input v-model="keyword" />
    <button @click="search">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
    };
  },
  methods: {
    search() {
      this.$axios.get('/api/search', { params: { keyword: this.keyword } }).then((res) => {
        console.log(res.data);
      });
    },
  },
};
</script>

2.后端控制器实现

在后端控制器中，接收前端传递的关键字参数，并且调用MyBatisPlus提供的模糊查询API进行查询。这里我们使用MyBatisPlus提供的QueryWrapper对象来构建查询条件，并且使用Lambda表达式来简化代码。

@RestController
@RequestMapping("/api")
public class SearchController {
    @Autowired
    private UserService userService;

    @GetMapping("/search")
    public List<User> search(String keyword) {
        QueryWrapper<User> wrapper = new QueryWrapper<>();
        wrapper.like("name", keyword).or().like("email", keyword);
        return userService.list(wrapper);
    }
}

在上面的代码中，我们构建了一个QueryWrapper对象，使用like方法来查询name或者email字段中包含关键字的数据。最终调用userService的list方法来执行查询操作。

需要注意的是，在这里我们假设UserService是一个MyBatisPlus提供的服务类，并且已经配置好了MapperScannerConfigurer来扫描Mapper接口。如果还没有配置，可以参考MyBatisPlus的文档进行配置。

3.配置MyBatisPlus

在使用MyBatisPlus的模糊查询功能前，需要先配置MyBatisPlus。在SpringBoot中，只需要在配置文件中添加如下配置即可：

mybatis-plus:
  mapper-locations: classpath:/mapper/**/*.xml
  global-config:
    db-config:
      logic-delete-value: 1
      logic-not-delete-value: 0
  configuration:
    map-underscore-to-camel-case: true

在上面的配置中，我们指定了Mapper接口XML文件的位置，配置了逻辑删除的值和驼峰命名规则等。

4.编写Mapper接口和XML文件

最后，我们需要编写Mapper接口和XML文件来实现具体的查询操作。这里我们以User表为例，编写如下代码：

public interface UserMapper extends BaseMapper<User> {
}

<mapper namespace="com.example.mapper.UserMapper">
  <resultMap id="BaseResultMap" type="com.example.entity.User">
    <id column="id" property="id" />
    <result column="name" property="name" />
    <result column="email" property="email" />
  </resultMap>

  <select id="selectByKeyword" resultMap="BaseResultMap">
    select * from user
    where name like concat('%', #{keyword}, '%')
      or email like concat('%', #{keyword}, '%')
  </select>
</mapper>

在上面的代码中，我们使用了MyBatisPlus提供的BaseMapper接口，并且编写了一个selectByKeyword方法来执行模糊查询操作。需要注意的是，我们使用了concat函数来将%和关键字拼接起来，以实现模糊查询的效果。

至此，我们已经完成了springboot+mybatisplus+vue实现模糊查询的全部操作。

Spring boot +vue 实现模糊查询

要实现模糊查询，需要在后端使用Spring Boot框架进行数据查询并返回符合条件的结果，同时在前端使用Vue框架进行数据展示。

在后端，可以使用Spring Data JPA提供的方法实现模糊查询。假设我们有一个实体类为User，其中有一个属性为name，需要根据name进行模糊查询。可以在Repository中定义一个方法，如下所示：

public interface UserRepository extends JpaRepository<User, Long> {
    List<User> findByNameContaining(String name);
}

在Controller中调用该方法，并将查询结果返回：

@RestController
@RequestMapping("/users")
public class UserController {

    @Autowired
    private UserRepository userRepository;

    @GetMapping("/search")
    public List<User> search(@RequestParam("name") String name) {
        return userRepository.findByNameContaining(name);
    }
}

在前端，可以使用Vue框架进行数据展示。假设我们有一个userList数组，需要根据输入框中的关键字进行模糊查询，并展示符合条件的结果。可以使用计算属性computed来实现：

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入关键字">
    <ul>
      <li v-for="user in filteredUsers" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userList: [],
        keyword: ''
      }
    },
    computed: {
      filteredUsers() {
        return this.userList.filter(user => user.name.includes(this.keyword))
      }
    }
  }
</script>

以上代码仅供参考，具体实现方式可以根据需求进行调整。