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

<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>