前端使用vue,一个输入框,实现多个字段,模糊查询

347 阅读1分钟
<template>
  <div>
    <input v-model="keyword" placeholder="请输入关键字">
    <ul>
      <li v-for="item in filteredList">{{ item.name }} - {{ item.age }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => {
        return item.name.indexOf(this.keyword) !== -1 || item.age.toString().indexOf(this.keyword) !== -1
      })
    }
  },
  watch: {
    keyword(val) {
      console.log(val)
    }
  }
}
</script>