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;
                      }
                });
            }
        }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容