Vue에서 일치하는 매개변수를 반복하는 방법

Vue에서는 들어오는 매개변수를 반복하고 일치시켜야 하는 경우가 많습니다. 이 기사에서는 Vue에서 일치하는 매개변수를 반복하는 방법을 소개합니다.

1단계: 구성 요소 정의

먼저 Vue 구성 요소를 정의해야 합니다. 여기서는 목록 구성 요소를 예로 들어 보겠습니다. 코드는 다음과 같습니다.

<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>

이 구성 요소는 listData라는 배열 매개 변수를 수신하고 이를 items에 할당하여 표시합니다. 구성 요소에서 Vue의 명령 v-for를 사용하여 렌더링 목록 데이터를 반복할 수 있으며 :key는 성능을 최적화하고 경고를 제거하는 데 사용됩니다. 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

2단계: 매개변수 전달

다음으로 Vue 인스턴스에 매개변수를 전달해야 합니다. 코드는 다음과 같습니다. 🎜rrreee🎜Vue 인스턴스에서는 import를 통해 List 구성 요소를 도입하고 data 배열을 매개 변수로 전달합니다. 로 List 구성 요소의 listData 속성입니다. 🎜🎜3단계: 루프 일치 매개변수🎜🎜이제 매개변수를 구성요소에 성공적으로 전달하고 데이터 목록을 렌더링했습니다. 전달된 매개변수와 일치하도록 반복해야 하는 경우 created 라이프 사이클에서 이를 수행할 수 있습니다. 코드는 다음과 같습니다. 🎜rrreee🎜Vue 인스턴스의 템플릿에서 List 구성 요소를 사용할 때 검색 항목 search를 추가하고 Banana를 전달합니다. 를 매개변수로 사용합니다. 🎜🎜다음으로 List 구성 요소의 created 수명 주기에서 filter 메서드를 사용하여 수신 매개변수를 반복하고 일치시킵니다. 구체적인 코드는 다음과 같습니다. 🎜rrreee🎜이 코드에서는 JavaScript 배열 filter 메서드를 사용하여 함수를 전달하여 조건을 충족하는 배열 항목을 필터링할 수 있습니다. 여기서는 배열 항목의 name 속성에 들어오는 search 매개변수가 포함되어 있는지 확인합니다. 조건을 충족하면 이를 items에 추가합니다. 배열. 궁극적으로 기준을 충족하는 목록 항목만 표시됩니다. 🎜🎜지금까지 우리는 Vue에서 루프 매칭 매개변수 기능을 성공적으로 구현했습니다. 실제 개발에서도 비슷한 방법을 사용하여 필요에 따라 구성 요소를 개발하고 개발 효율성을 높이며 사용자 경험을 향상시킬 수 있습니다. 🎜

위 내용은 Vue에서 일치하는 매개변수를 반복하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!