vue 过滤使用（匹配搜索）

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

    }