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.

Étape 1 : Définir le composant

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

Étape 2 : transmettre les paramètres

Ensuite, nous devons transmettre les paramètres dans l'instance Vue. Le code est le suivant : 🎜rrreee🎜Dans l'instance Vue, nous introduisons le composant 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!