vue 过滤使用（匹配搜索）

最新推荐文章于 2024-09-05 13:30:00 发布

webGather

最新推荐文章于 2024-09-05 13:30:00 发布

阅读量1k

点赞数

分类专栏： vue知识汇总文章标签： vue.js

本文链接：https://blog.csdn.net/qq_36493811/article/details/120184785

版权

本文介绍了如何在Vue.js项目中使用v-model、watch及filter()方法实现搜索框的模糊搜索功能。filter()函数用于查找数组中符合条件的元素，确保不对原始数组造成修改。通过匹配内容并创建新数组来展示搜索结果。

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

1、实际项目应用：搜索框模糊搜索、匹配搜索

2、借助于v-model 和 watch 以及filter()

4、filter() 检查指定数组符合条件的所有元素；不改变原数组

3、通过数组匹配，将符合的内容插入到新数组完成展示

<template>

  <div class="filters">

    <input

      type="text"

      v-model="keyWord"

    >

    <div class="list">

      <ul>

        <li

          v-for="item in filterList"

          :key="item.id"

        >{
  {item.name}} - {
  {item.age}}</li>

      </ul>

    </div>

  </div>

</template>



<script>

export default {

  name: '',

  data () {

    return {

      keyWord: '',

      list: [

        { id: 1, name: '张三', age: 27 },

        { id: 2, name: '李三', age: 16 },

        { id: 3, name: '李四', age: 30 },

        { id: 4, name: '张丽丽', age: 14 },

      ],

      filterList: []

    }

最低0.47元/天解锁文章