20、vue搜索小案例demo

1.在data中定义一个数组和关键字

keywords：''
students: [
                {name: '张三', sex: '女', age: 19, phone: '18921212121'},
                {name: '李四', sex: '男', age: 29, phone: '18921221121'},
                {name: '王五', sex: '女', age: 39, phone: '18921788721'},
                {name: '赵六', sex: '男', age: 49, phone: '18921556121'},
                {name: '李四', sex: '男', age: 29, phone: '18921221121'},
                {name: '王五', sex: '女', age: 39, phone: '18921788721'},
                {name: '李四', sex: '男', age: 29, phone: '18921221121'},
                {name: '王五', sex: '女', age: 39, phone: '18921788721'},
                {name: '王五', sex: '女', age: 39, phone: '18921788721'},
                {name: '赵六', sex: '男', age: 49, phone: '18921556121'},
                {name: '李思思', sex: '男', age: 29, phone: '18921221121'},
                {name: '张三', sex: '女', age: 19, phone: '18921212121'},
                {name: '李四', sex: '男', age: 29, phone: '18921221121'},
                {name: '王五', sex: '女', age: 39, phone: '18921788721'},
                {name: '赵六', sex: '男', age: 49, phone: '18921556121'},
                {name: '李四', sex: '男', age: 29, phone: '18921221121'},
                {name: '王五', sex: '女', age: 39, phone: '18921788721'},
                {name: '李四', sex: '男', age: 29, phone: '18921221121'},
                {name: '王五', sex: '女', age: 39, phone: '18921788721'},
                {name: '王五', sex: '女', age: 39, phone: '18921788721'},
                {name: '赵六', sex: '男', age: 49, phone: '18921556121'},
                {name: '李五五', sex: '男', age: 29, phone: '18921221121'}
            ],

2.在搜索框中v-modle绑定

搜搜关键字://
   <input type="text" class="search" v-model="keywords">

3.在相应的地方循环渲染数组，记得加上关键字keywords

v-for="(stu, index) in searchList(keywords)" :key="index"

4.用.filter方法和.includes方法

  methods: {
            // 数组
            searchList(keyWords){
                return this.students.filter((student)=>{
                      if(student.name.includes(keyWords)){
                           return student;
                      }
                });
            }
        }