Vue를 사용하여 축소된 목록을 구현하는 방법은 무엇입니까?

Vue는 Vue를 사용하여 대화형 웹 애플리케이션을 쉽게 구축할 수 있게 해주는 인기 있는 JavaScript 프레임워크입니다. 이번 글에서는 Vue를 사용하여 축소된 목록을 구현하는 방법에 대해 설명합니다. 축소 목록은 사용자가 콘텐츠를 확장하고 축소할 수 있는 일반적인 대화형 구성 요소입니다.

Vue에서는 v-if 및 v-show 명령어를 사용하여 축소된 목록을 쉽게 구현할 수 있습니다. 이 두 지시어는 비슷한 기능을 갖고 있으며 요소의 가시성을 제어할 수 있습니다. v-if는 조건에 따라 요소를 추가하거나 제거하는 반면, v-show는 요소의 표시 또는 숨겨진 상태만 전환합니다.

먼저 Vue 인스턴스를 생성하고 이를 HTML 요소에 마운트해야 합니다. 그런 다음 축소된 목록의 모든 항목을 포함할 배열을 정의합니다. 이 예에서는 목록 항목의 형식이 다음과 같다고 가정합니다.

{
  title: 'Item 1',
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},

또한 각 목록 항목의 표시 여부를 전환하는 버튼을 템플릿에 정의해야 합니다. v-show 지시문을 사용하여 이를 달성할 수 있습니다. 버튼을 클릭하면 contentDiv의 표시/숨기기 상태가 전환됩니다.

다음은 기본 축소 목록 구성 요소 템플릿입니다.

<div id="app">
  <h2>折叠列表</h2>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <button @click="toggle(index)">展开/收起</button>
      <h3>{{ item.title }}</h3>
      <div v-show="item.showContent" class="contentDiv">{{ item.content }}</div>
    </li>
  </ul>
</div>

다음으로 Vue 인스턴스에서 목록 항목 배열과 토글 기능을 정의하여 각 목록 항목의 가시성을 전환해야 합니다. 토글 함수는 토글할 목록 항목의 인덱스인 하나의 매개변수를 허용합니다. 이 함수는 항목의 showContent 속성을 반전시키고 구성 요소의 상태도 업데이트합니다.

new Vue({
  el: '#app',
  data: {
    items: [
      {
        title: 'Item 1',
        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        showContent: false
      },
      {
        title: 'Item 2',
        content: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        showContent: false
      },
      {
        title: 'Item 3',
        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
        showContent: false
      }
    ]
  },
  methods: {
    toggle: function(index) {
      this.items[index].showContent = !this.items[index].showContent;
    }
  }
})

마지막으로 구성 요소에 일부 CSS 스타일을 추가하여 모양과 레이아웃을 제어해야 합니다.

ul {
  list-style: none;
  padding: 0;
}

li {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 10px;
}

button {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #333;
  cursor: pointer;
  outline: none;
  padding: 5px 10px;
}

.contentDiv {
  margin-top: 10px;
}

이제 간단한 축소 가능한 목록 구성 요소가 완성되었습니다. 이 구성 요소를 사용하여 애플리케이션에 대화형 목록을 표시할 수 있습니다. 사용자 정의 스타일과 기타 기능을 추가하여 이 구성 요소를 확장할 수 있습니다.

간단히 말해서 Vue는 대화형 웹 애플리케이션을 더 쉽게 구축할 수 있는 많은 유용한 기능을 제공하는 매우 강력한 프런트 엔드 프레임워크입니다. Vue를 사용하면 축소 목록을 포함한 복잡한 UI 구성 요소를 쉽게 구현할 수 있습니다.

위 내용은 Vue를 사용하여 축소된 목록을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!