vue模糊查询计算属性实现版本

最新推荐文章于 2025-12-31 18:42:36 发布

原创最新推荐文章于 2025-12-31 18:42:36 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

此博客介绍了如何使用Vue实现一个实时搜索功能，通过用户输入的关键字过滤明星列表，展示匹配的名字、年龄。数据结构和计算属性配合，展示了信息技术中搜索算法的应用。

<template>
  <div>
    <!-- 输入框 -->
    <input type="text" v-model="keyWord" />   
    <!-- 循环渲染 -->
    <li v-for="(item, id) in newStarList" :key="id">
      {{ item.id }} {{ item.name }} - {{ item.age }}
    </li>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyWord: "", // 用户输入值
      // 明星列表
      starList: [
        { 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 },
      ],
    };
  },
  computed: {
    newStarList() {
      // indexof 检测每一次输入的值   返回存在的值
      return  this.starList.filter(
        item => item.name.indexOf(this.keyWord) !== -1
      );
    },
  },
};

</script>

<style>

</style>