模糊查询 vue 监听器/侦听器实现版本

最新推荐文章于 2025-12-31 18:42:36 发布

原创最新推荐文章于 2025-12-31 18:42:36 发布 · 779 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

这篇文章展示了如何使用 Vue.js 实现一个简单的搜索功能，用户输入关键字后，会动态过滤并显示明星列表中包含该关键字的明星及其信息。

<template>
  <div>
    <!-- 输入框 -->
    <input type="text" v-model="keyWord" />   
    <!-- 循环渲染 -->
    <li v-for="(item, id) in newStarList" :key="id">
      {{ item.id }} {{ item.name }} - {{ item.age }}
    </li>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyWord: "", // 用户输入值
      // 明星列表
      starList: [
        { id: "1", name: "周冬雨", age: 18 },
        { id: "2", name: "马冬梅", age: 18 },
        { id: "3", name: "周杰伦", age: 18 },
        { id: "4", name: "郭艾伦", age: 18 },
        { id: "5", name: "马艾伦", age: 18 },
      ],
      newStarList:[]   // 新数组
    };
  },
  watch:{
    // 监听 用户输入值
    keyWord:{
      // 处理函数
      handler(newVal){
           console.log(newVal);
           // 过滤初始数组，检测有用户输入的 赋值给新数组渲染
       this.newStarList =  this.starList.filter(
          item => item.name.indexOf(newVal) !== -1
        )
      },
      deep:true,  // 开启深度监听，监听对象里面的属性，默认是false
      immediate:true,   // 初始执行一次监听里面的函数
    },
       
  }
};

</script>

<style>

</style>