vue2的点击事件简单搜索案例

前端小白新人一枚~  有不对请指正哦~

写这篇文章的原因：

1. 我使用了 computed 和 watch分别实现对列表的过滤筛选，发现这两个方法均是用户输入自动过滤，于是我想使用 点击事件过滤，以下会附上使用watch和点击事件实现代码;

2. 对于watch和computed的理解不足，反思后我对两种方法的理解：

（1）computed :   （更适合属性 如：商品结算）

    A.  触发函数执行  监听数据（其计算的是对象，属性； 计算属性不可在data中定义，例：不可侦听定义在data里的数组）

    B. computed中的函数必须要用 return返回 ,首次加载就开始监听，通俗讲就是页面首次刷新即可显示出全部将要进行筛选的数据

（2）watch:  （更适合数据 如：搜索框）

     A.watch是监听一个值的变化，然后执行对应的回调。不用 return返回 ,首次加载需要开启监听。immediate:true

watch实现输入自动过滤：

      <div class="search-input">
         <el-input v-model="keyword" placeholder="请输入内容">
         </el-input>
       </div>
       <div class="search-button">
         <el-button type="primary" @click="searchButton()"
          > 搜索 </el-button>
       </div>
         <ul>
           <li v-for="(card, index) in filtertabList" :key="index">
                {{ card.name }}
           </li>
         </ul>

data(){
 keyword: "",
 filtertabList: [],
      tabList: [
        { name: "职业0" },
        { name: "职业1" },
        { name: "兴趣2" },
        { name: "兴趣3" },
      ],
}

  watch: {
    keyword: {
       immediate: true,
       handler(value) {
         this.filtertabList = this.tabList.filter((t) => {
           return t.name.indexOf(value) !== -1;
         });
       },
     },
  },

 点击事件过滤: 

created() {
    this.filtertabList = this.tabList;
  },
methods:{ 
searchButton() {
      if (this.keyword) {
        this.filtertabList = this.tabList.filter((card) => {
          return card.name.indexOf(this.keyword) !== -1;
        });
      } else {
        this.filtertabList = this.tabList;
      }
    },
}