<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: []

    }

  },

  watch: {

    keyWord: {

      //首次绑定是否执行handler

      immediate: true,

      //一般情况下，数据发生变化handler才会执行

      handler (val) {

        //过滤数据赋值给新数组

        this.filterList = this.list.filter((item) => {

         //判断是否在数组中存在

          return item.name.indexOf(val) !== -1

        })

      }

    }

  },

  components: {}

}

</script>

<style scoped lang="scss">

</style>