vue中对数组内的内容进行查询输入名称后查询

在Vue中对数组内的内容进行查询输入名称后查询，可以使用Vue的计算属性和watch监听来实现。

例如，假设有一个名为`list`的数组，其中包含多个对象，每个对象都包含一个`name`属性和一个`age`属性。我们可以使用一个名为`keyword`的data属性来存储用户输入的查询关键字，然后使用一个计算属性`filtered`来返回根据关键字查询后的结果：

<template>
  <div>
    <input v-model="keyword" type="text" placeholder="请输入名称关键字"/>
    <ul>
      <li v-for="item in filtered" :key="item.name">{{ item.name }} - {{ item.age }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '张三', age: 20 },
        { name: '李四', age: 17 },
        { name: '王五', age: 25 },
        { name: '赵六', age: 16 }
      ],
      keyword: ''
    }
  },
  computed: {
    filtered() {
      let keyword = this.keyword.trim();
      if (!keyword) {
        return this.list;
      }
      return this.list.filter(item => item.name.includes(keyword));
    }
  }
}
</script>

这里使用了一个计算属性`filtered`来返回根据关键字查询后的结果。当`keyword`的值改变时，`filtered`会自动更新，从而实现动态查询的效果。

除此之外，也可以使用watch监听`keyword`的变化，然后手动更新查询结果。例如：

<template>
  <div>
    <input v-model="keyword" type="text" placeholder="请输入名称关键字"/>
    <ul>
      <li v-for="item in filtered" :key="item.name">{{ item.name }} - {{ item.age }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '张三', age: 20 },
        { name: '李四', age: 17 },
        { name: '王五', age: 25 },
        { name: '赵六', age: 16 }
      ],
      keyword: ''
    }
  },
  computed: {
    filtered() {
      let keyword = this.keyword.trim();
      if (!keyword) {
        return this.list;
      }
      return this.list.filter(item => item.name.includes(keyword));
    }
  },
  watch: {
    keyword() {
      this.$nextTick(() => {
        this.filtered = this.list.filter(item => item.name.includes(this.keyword.trim()));
      });
    }
  }
}
</script>

这里使用了一个watch监听`keyword`的变化，然后手动更新查询结果。注意要使用`this.$nextTick`来确保DOM更新后再进行查询。