Comment implémenter la fonction de recherche dans Vue

Dans le processus de mise en œuvre des fonctions frontales, la fonction de recherche est une exigence courante. En tant que framework frontal populaire, Vue peut également bien prendre en charge la mise en œuvre de fonctions de recherche. Cet article présentera comment implémenter la fonction de recherche dans Vue et fournira des exemples de code spécifiques.

1. Préparation

Avant d'implémenter la fonction de recherche, nous devons préparer une source de données, c'est-à-dire certaines données qui doivent être recherchées. Dans l'exemple de cet article, nous utilisons un tableau contenant des informations sur le livre comme source de données, avec le format suivant :

books: [
  {
    id: 1,
    title: 'Vue.js实战',
    author: '梁灏',
    publisher: '人民邮电出版社'
  },
  {
    id: 2,
    title: 'JavaScript高级程序设计',
    author: 'Nicholas C.Zakas',
    publisher: '人民邮电出版社'
  },
  {
    id: 3,
    title: '深入浅出Node.js',
    author: '朴灵',
    publisher: '人民邮电出版社'
  },
  // 更多书籍信息...
]

En plus de préparer la source de données, nous devons également ajouter un élément d'entrée à Vue pour recevoir les entrées de l'utilisateur.

<input v-model="keyword" placeholder="请输入关键字进行搜索">

Parmi eux, la directive v-model est un moyen d'implémenter une liaison de données bidirectionnelle dans Vue. Elle combine la valeur saisie par l'utilisateur dans l'élément d'entrée avec le keyword<. /code dans l'instance Vue > Lier les attributs pour obtenir une mise à jour synchrone des données. <code>v-model指令是Vue中实现双向数据绑定的一种方式，它将input元素中用户输入的值与Vue实例中的keyword属性进行绑定，实现数据的同步更新。

二、使用computed实现搜索

Vue提供了一种特殊的属性computed，可以方便地对数据进行处理，并在数据发生改变时自动更新。我们可以使用computed来实现搜索功能。

在本例中，我们可以定义一个computed属性filteredBooks，用于存储搜索之后的结果。

computed: {
  filteredBooks() {
    return this.books.filter((book) => {
      return book.title.indexOf(this.keyword) !== -1 || 
             book.author.indexOf(this.keyword) !== -1 ||
             book.publisher.indexOf(this.keyword) !== -1;
    })
  }
}

在上述代码中，我们将搜索关键字this.keyword与每一本书籍的标题、作者和出版社进行比对，如果匹配成功则返回对应的书籍信息。这里使用了数组的filter()方法，它会返回一个新数组，包含所有满足条件的元素。

最后，我们可以在页面中使用v-for指令循环渲染filteredBooks数组中的每一个元素。

<ul>
  <li v-for="book in filteredBooks" :key="book.id">
    {{ book.title }} - {{ book.author }} - {{ book.publisher }}
  </li>
</ul>

在上述代码中，v-for指令会将filteredBooks数组中的每一个元素渲染为一个li元素，并绑定一个唯一的key值。这里我们使用每一本书籍的id作为key值，保证每一个元素的唯一性。

三、使用watch实现搜索

除了computed属性外，Vue还提供了一种叫做watch的属性，可以实现“监听”数据的变化，并在数据变化时触发相应的操作。我们也可以利用watch属性来实现搜索功能。

在本例中，我们可以定义一个watch属性searchResult，在keyword属性变化时更新搜索结果。

watch: {
  keyword() {
    this.searchResult = this.books.filter((book) => {
      return book.title.indexOf(this.keyword) !== -1 || 
             book.author.indexOf(this.keyword) !== -1 ||
             book.publisher.indexOf(this.keyword) !== -1;
    })
  }
}

在上述代码中，keyword属性变化时会触发watch属性中的函数。我们将新的搜索结果存储在searchResult属性中，并在页面中使用v-for

2. Utiliser calculé pour implémenter la recherche

Vue fournit un attribut spécial calculé, qui peut facilement traiter les données et se mettre à jour automatiquement lorsque les données changent. Nous pouvons utiliser calculé pour implémenter la fonction de recherche.

Dans cet exemple, nous pouvons définir un attribut calculé filteredBooks pour stocker les résultats après la recherche.

<ul>
  <li v-for="book in searchResult" :key="book.id">
    {{ book.title }} - {{ book.author }} - {{ book.publisher }}
  </li>
</ul>

Dans le code ci-dessus, nous comparons le mot-clé de recherche this.keyword avec le titre, l'auteur et l'éditeur de chaque livre. Si la correspondance est réussie, les informations du livre correspondantes sont renvoyées. La méthode filter() du tableau est utilisée ici, qui renverra un nouveau tableau contenant tous les éléments qui remplissent les conditions.

Enfin, nous pouvons utiliser l'instruction v-for dans la page pour parcourir chaque élément du tableau filteredBooks.

<script>
export default {
  data() {
    return {
      books: [
        {
          id: 1,
          title: 'Vue.js实战',
          author: '梁灏',
          publisher: '人民邮电出版社'
        },
        {
          id: 2,
          title: 'JavaScript高级程序设计',
          author: 'Nicholas C.Zakas',
          publisher: '人民邮电出版社'
        },
        {
          id: 3,
          title: '深入浅出Node.js',
          author: '朴灵',
          publisher: '人民邮电出版社'
        },
        // 更多书籍信息...
      ],
      keyword: ''
    }
  },
  computed: {
    filteredBooks() {
      return this.books.filter((book) => {
        return book.title.indexOf(this.keyword) !== -1 || 
              book.author.indexOf(this.keyword) !== -1 ||
              book.publisher.indexOf(this.keyword) !== -1;
      })
    }
  },
  /*watch: {
    keyword() {
      this.searchResult = this.books.filter((book) => {
        return book.title.indexOf(this.keyword) !== -1 || 
               book.author.indexOf(this.keyword) !== -1 ||
               book.publisher.indexOf(this.keyword) !== -1;
      })
    }
  }*/
}
</script>

Dans le code ci-dessus, la directive v-for restituera chaque élément du tableau filteredBooks en tant qu'élément li et liera une valeur de clé unique. Ici, nous utilisons le id de chaque livre comme valeur clé pour garantir l'unicité de chaque élément. 🎜🎜3. Utilisez watch pour implémenter la recherche🎜🎜En plus de l'attribut calculé, Vue fournit également un attribut appelé watch, qui peut « surveiller » les modifications des données et déclencher les actions correspondantes lorsque les modifications des données s'effectuent. . Nous pouvons également utiliser l'attribut watch pour implémenter la fonction de recherche. 🎜🎜Dans cet exemple, nous pouvons définir un attribut de surveillance searchResult pour mettre à jour les résultats de la recherche lorsque l'attribut keyword change. 🎜rrreee🎜Dans le code ci-dessus, lorsque l'attribut keyword change, la fonction dans l'attribut watch sera déclenchée. Nous stockons les nouveaux résultats de recherche dans l'attribut searchResult et parcourons la page pour afficher les résultats de recherche à l'aide de la directive v-for. 🎜rrreee🎜4. Exemple de code complet🎜🎜Maintenant, nous avons implémenté avec succès la fonction de recherche dans Vue. Vous trouverez ci-dessous l'exemple de code complet. 🎜rrreee🎜Ce qui précède est un exemple de code qui utilise l'attribut calculé pour implémenter la fonction de recherche. Si vous devez utiliser l'attribut watch pour implémenter la fonction de recherche, décommentez simplement le code correspondant. 🎜🎜Résumé🎜🎜Cet article présente comment implémenter la fonction de recherche dans Vue et fournit des exemples de code spécifiques. Que vous utilisiez l'attribut calculé ou l'attribut watch, la fonction de recherche peut être implémentée efficacement. Dans les applications pratiques, nous pouvons choisir la méthode appropriée en fonction de besoins spécifiques pour obtenir une meilleure expérience utilisateur. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!