{{ item .name }} "/> {{ item .name }} ">
Maison > Article > interface Web > Comment boucler les paramètres correspondants dans vue
Dans Vue, nous devons souvent boucler et faire correspondre les paramètres entrants. Cet article vous présentera comment boucler les paramètres correspondants dans Vue.
Tout d'abord, nous devons définir un composant Vue. Ici, nous prenons le composant list comme exemple. Le code est le suivant :
<template> <div> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { name: "List", props: { listData: { type: Array, required: true, }, }, data() { return { items: [], }; }, created() { this.items = this.listData; }, }; </script>
Ce composant reçoit un paramètre de tableau nommé listData
et l'affecte à items
pour l'affichage. Dans le composant, nous pouvons utiliser l'instruction v-for
de Vue pour parcourir les données de la liste de rendu, et :key
est utilisé pour optimiser les performances et éliminer les avertissements. listData
的数组参数,并将其赋值给items
进行展示。在组件中,我们可以使用Vue的指令v-for
来循环渲染列表数据,而:key
用于优化性能并消除警告。
接下来,我们需要在Vue实例中传入参数。代码如下:
<template> <div> <List :listData="data" /> </div> </template> <script> import List from "@/components/List"; export default { name: "App", components: { List, }, data() { return { data: [ { id: 1, name: "Apple" }, { id: 2, name: "Banana" }, { id: 3, name: "Orange" }, ], }; }, }; </script>
在Vue实例中,我们通过import
引入List
组件,并将data
数组作为参数传递给List
组件的listData
属性。
现在,我们已经成功将参数传给了组件,并渲染出了数据列表。如果我们需要循环匹配传入的参数,我们可以在created
生命周期中进行操作。代码如下:
<template> <div> <List :listData="data" search="Banana" /> </div> </template> <script> import List from "@/components/List"; export default { name: "App", components: { List, }, data() { return { data: [ { id: 1, name: "Apple" }, { id: 2, name: "Banana" }, { id: 3, name: "Orange" }, ], }; }, }; </script>
在Vue实例的模板中,我们在使用List
组件时,增加了一个搜索项search
,并传递了Banana
作为参数。
接下来,在List
组件的created
生命周期中,我们将使用filter
方法循环匹配传入的参数。具体代码如下:
<script> export default { name: "List", props: { listData: { type: Array, required: true, }, search: { type: String, default: "", }, }, data() { return { items: [], }; }, created() { this.items = this.listData.filter((item) => item.name.includes(this.search) ); }, }; </script>
在此代码中,我们使用了JavaScript的数组filter
方法,通过传入一个function,可以筛选出符合条件的数组项。在这里,我们判断数组项的name
属性是否包含了传入的search
参数,如果符合条件,就将其加入到items
List
via import
et passons le tableau data
en paramètre à La propriété <code>listData
du composant List. 🎜🎜Étape 3 : Paramètres de correspondance de boucle🎜🎜Maintenant, nous avons réussi à transmettre les paramètres au composant et à restituer la liste de données. Si nous devons faire une boucle pour faire correspondre les paramètres passés, nous pouvons le faire dans le cycle de vie créé
. Le code est le suivant : 🎜rrreee🎜Dans le modèle de l'instance Vue, lors de l'utilisation du composant List
, nous avons ajouté un élément de recherche search
et passé Banana comme paramètre. 🎜🎜Ensuite, dans le cycle de vie <code>created
du composant List
, nous utiliserons la méthode filter
pour boucler et faire correspondre les paramètres entrants. Le code spécifique est le suivant : 🎜rrreee🎜Dans ce code, nous utilisons la méthode JavaScript array filter
En passant une fonction, nous pouvons filtrer les éléments du tableau qui remplissent les conditions. Ici, nous déterminons si l'attribut name
de l'élément du tableau contient le paramètre search
entrant. S'il remplit les conditions, ajoutez-le à items
dans. le tableau. En fin de compte, nous afficherons uniquement les éléments de liste qui répondent aux critères. 🎜🎜Jusqu'à présent, nous avons implémenté avec succès la fonction de paramètres de correspondance de boucle dans Vue. Dans le développement réel, nous pouvons également utiliser des méthodes similaires pour développer des composants en fonction des besoins, améliorer l'efficacité du développement et améliorer l'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!