Vue 목록을 보는 방법

Vue.js는 웹 인터페이스와 단일 페이지 애플리케이션(SPA)을 구축하는 데 사용할 수 있는 인기 있는 JavaScript 프레임워크입니다. Vue에서 목록은 매우 일반적인 데이터 표현 형식입니다. 이 기사에서는 Vue 목록의 몇 가지 일반적인 방법과 기술을 소개합니다.

1. v-for 명령어를 사용하여 목록 만들기

Vue는 배열이나 객체를 반복하고 목록을 생성하는 v-for 명령어를 제공합니다. v-for를 사용할 때 현재 반복의 항목, 현재 반복의 항목 인덱스 또는 현재 반복의 키(객체인 경우)를 사용할 수 있습니다.

예를 들어 여러 영화를 포함하는 영화 배열이 있다고 가정해 보겠습니다. v-for를 사용하여 배열을 반복하여 페이지의 각 영화에 대한 li 태그를 생성할 수 있습니다:

<ul>
  <li v-for="movie in movies" :key="movie.id">{{ movie.title }}</li>
</ul>

이 예에서는 v-for 명령어를 사용하여 영화 배열을 반복하고 각 영화에 대한 li를 생성합니다. 상표. 또한 각 li 태그에 대한 주요 속성을 지정하여 Vue가 목록을 다시 렌더링할 때 성능을 최적화하는 데 도움이 됩니다.

2. 계산된 속성을 사용하여 목록 필터링 또는 정렬

때때로 목록의 데이터 일부를 필터링하거나 정렬해야 하는 경우 Vue는 이러한 목적을 달성하기 위해 계산된 속성을 제공합니다. 계산된 속성은 반환 값을 동적으로 계산할 수 있는 속성입니다. 의존하는 속성이 변경되면 다시 계산하여 새 값을 반환합니다.

예를 들어, 모든 영화를 포함하는 영화 배열과 "액션"으로 분류된 영화를 포함하는 필터링된 영화 배열이 있다고 가정합니다. 계산된 속성을 사용하여 "Action"으로 분류된 모든 영화를 필터링할 수 있습니다.

data() {
  return {
    movies: [...],
    genre: 'Action',
  }
},
computed: {
  filteredMovies() {
    return this.movies.filter(movie => movie.genre === this.genre)
  }
}

이 예에서는 계산된 속성에filteredMovies라는 계산된 속성을 정의합니다. Array.filter() 메서드를 사용하여 장르가 현재 선택한 장르와 동일한 영화를 필터링합니다.

마찬가지로 계산된 속성을 사용하여 목록을 정렬할 수 있습니다. 예를 들어, 등급에 따라 영화를 오름차순 또는 내림차순으로 정렬할 수 있습니다.

data() {
  return {
    movies: [...],
    sortBy: 'rating',
    sortDirection: 'asc',
  }
},
computed: {
  sortedMovies() {
    return this.movies.sort((a, b) => {
      const sortOrder = this.sortDirection === 'asc' ? 1 : -1
      if (a[this.sortBy] < b[this.sortBy]) {
        return -1 * sortOrder
      }
      if (a[this.sortBy] > b[this.sortBy]) {
        return 1 * sortOrder
      }
      return 0
    })
  }
}

이 예에서는 계산 속성에 sortedMovies 계산 속성을 정의합니다. Array.sort() 메서드를 사용하여 등급 속성에 따라 영화를 정렬합니다. sortDirection 속성에 따라 정렬 방향은 "asc"(오름차순) 또는 "desc"(내림차순)일 수 있습니다.

3. 객체 속성과 함께 목록 사용

어떤 경우에는 목록이 단순한 배열이 아니라 중첩된 객체의 모음일 수도 있습니다. 이러한 개체는 서로 다른 속성과 속성 값을 가질 수 있습니다.

영화를 포함하는 객체 영화가 있고, 각 영화에는 제목 속성과 영화 카테고리를 포함하는 장르 배열이 있다고 가정해 보겠습니다. 아래와 같이 v-for 지시어를 사용하여 객체 속성을 반복할 수 있습니다.

<template>
  <div v-for="(movie, key) in movies" :key="key">
    <h2>{{ movie.title }}</h2>
    <ul>
      <li v-for="genre in movie.genres" :key="genre">{{ genre }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movies: {
        1: {
          title: 'The Dark Knight',
          genres: ['Action', 'Crime', 'Drama'],
        },
        2: {
          title: 'Pulp Fiction',
          genres: ['Crime', 'Drama'],
        },
      },
    }
  },
}
</script>

이 예에서는 v-for 지시어를 사용하여 객체 속성을 반복합니다. 영화 변수와 키 변수를 사용하여 현재 반복되는 개체와 이 개체의 키를 나타냅니다. 그런 다음 v-for 지시어를 사용하여 각 영화의 카테고리를 반복하고 li 태그를 만듭니다.

요약

이 글에서는 Vue 목록에 대한 몇 가지 일반적인 방법과 기술을 소개했습니다. 우리는 v-for 명령어를 사용하여 배열이나 객체를 반복하고 목록을 만드는 방법을 배웠습니다. 또한 계산된 속성을 사용하여 목록을 필터링하고 정렬하는 방법도 배웠습니다. 마지막으로 객체 속성이 포함된 목록으로 작업하는 방법을 살펴보았습니다.

Vue는 매우 강력하고 유연한 프레임워크입니다. 이 기사가 도움이 되기를 바라며 Vue를 사용하여 목록을 더 잘 만드는 데 도움이 되기를 바랍니다.

위 내용은 Vue 목록을 보는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!