列表过滤功能

126 阅读1分钟
data() {
    return {
      inputValue: '',
      persons: [
        { id: '1', name: '张三', age: '18' },
        { id: '2', name: '张四', age: '18' },
        { id: '3', name: '李五', age: '18' },
        { id: '4', name: '王三', age: '18' },
        { id: '5', name: '李六', age: '18' },
      ],
      filterArr: []
    }
  },
  //用watch写法
  watch: {
    inputValue: {
      immediate:true,
      handler(val) {
        this.filterArr = this.persons.filter((v) => {
          return v.name.includes(val)
        })
      }
    }
   //computed写法
   computed:{
   filters(){
        return  this.filterArr = this.persons.filter((v) => {
          return v.name.includes(this.inputValue)
        })
   }
   }
  }

如果想做排序功能

Snipaste.jpg