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

Vue는 웹 개발 분야에서 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. Vue에서는 다양한 컴포넌트와 인터랙티브 효과를 쉽게 구현할 수 있습니다. 그 중 축소 가능한 목록은 목록 데이터를 그룹화하여 데이터 표시의 가독성을 높이는 동시에 특정 콘텐츠를 확장해야 할 때 확장할 수 있어 사용자가 세부 정보를 편리하게 볼 수 있도록 하는 구성 요소입니다. 정보. 이 기사에서는 Vue를 사용하여 축소 가능한 목록을 구현하는 방법을 소개합니다.

1. 준비

Vue를 사용하여 축소 가능한 목록을 구현하기 전에 다음 작업을 준비해야 합니다.

1.1 Vue 환경: 공식 웹사이트 다운로드 또는 CDN 소개를 통해 소개할 수 있는 Vue.js를 설치합니다.

1.2 데이터 준비: 표시할 데이터를 준비합니다. 배열 또는 개체일 수 있으며 각 항목에는 표시된 데이터의 제목과 내용이 포함됩니다.

2. HTML 구조

우리의 축소 가능한 목록은 주로 두 부분으로 구성됩니다. 하나는 목록을 표시하는 제목 부분이고 다른 하나는 목록의 내용을 표시하는 부분입니다. 그 중 제목 부분에서는 콘텐츠 부분의 확장 및 축소를 트리거하는 클릭 이벤트를 설정해야 합니다. 따라서 Vue의 v-for 명령을 사용하여 렌더링 목록을 반복하고 클릭 이벤트를 다음과 같이 바인딩할 수 있습니다.

<template>
  <div>
    <ul>
      <li v-for="(item,index) in dataList" :key="index" @click="toggle(index)">
        {{ item.title }}
      </li>
    </ul>
    <div v-for="(item,index) in dataList" :key="index">
      <div v-show="item.show">{{ item.content }}</div>
    </div>
  </div>
</template>

이 코드에서는 ul과 div 세트가 포함된 래퍼 요소를 사용합니다. 그 중 제목 부분에 있는 여러 개의 li가 ul로 렌더링되며, 각 li의 내용은 item.title입니다. 각 li에 해당하는 확장된 내용은 v-show 명령에 의해 제어됩니다. item.show가 true이면 확장된 콘텐츠가 표시됩니다.

3. JavaScript logic

다음으로 축소 가능한 목록 기능을 구현하기 위한 JavaScript 로직을 작성해야 합니다. 구체적인 단계는 다음과 같습니다.

3.1 데이터 구조 정의

데이터는 두 부분을 포함해야 합니다. 목록의 제목, 다른 부분은 목록에 해당하는 내용입니다. 따라서 데이터 구조를 다음과 같이 정의할 수 있습니다.

data() {
  return {
    dataList: [
      {
        title: "列表标题1",
        content: "列表1的详细内容",
        show: false,
      },
      {
        title: "列表标题2",
        content: "列表2的详细内容",
        show: false,
      },
      {
        title: "列表标题3",
        content: "列表3的详细内容",
        show: false,
      },
    ],
  };
},

그 중 show 매개변수는 확장된 부분의 표시 여부를 제어하는 ​​데 사용됩니다. 처음에는 확장된 부분이 닫히기를 원하므로 표시 값을 false로 설정합니다.

3.2 확장 상태를 전환하려면 클릭

클릭 확장/축소 효과를 얻으려면 제목 부분의 li 요소에 클릭 이벤트를 바인딩해야 합니다. 토글 메소드를 호출하여 각 목록에 해당하는 확장 상태를 전환할 수 있습니다. 구체적인 코드는 다음과 같습니다.

methods: {
  toggle(index) {
    const item = this.dataList[index];
    item.show = !item.show;
  },
},

토글 메소드에서는 현재 목록 항목 항목을 가져오고, 수정하여 확장된 내용의 표시 및 숨기기를 제어합니다. 쇼 매개변수.

4. 스타일 설정

마지막으로 목록이 더 아름답게 표시되도록 스타일을 지정해야 합니다.

li {
  background: #eee;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

li:hover {
  background: #ccc;
}

div {
  padding: 10px;
}

CSS에서는 각 li 요소의 스타일을 지정합니다. 또한 마우스를 올리면 배경색도 변경되었습니다. 확장된 콘텐츠 섹션의 스타일도 간단하게 설정되었습니다.

이제 접이식 목록 구현이 완료되었습니다. 전체 코드는 다음과 같습니다:

<template>
  <div>
    <ul>
      <li v-for="(item,index) in dataList" :key="index" @click="toggle(index)">
        {{ item.title }}
      </li>
    </ul>
    <div v-for="(item,index) in dataList" :key="index">
      <div v-show="item.show">{{ item.content }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          title: "列表标题1",
          content: "列表1的详细内容",
          show: false,
        },
        {
          title: "列表标题2",
          content: "列表2的详细内容",
          show: false,
        },
        {
          title: "列表标题3",
          content: "列表3的详细内容",
          show: false,
        },
      ],
    };
  },
  methods: {
    toggle(index) {
      const item = this.dataList[index];
      item.show = !item.show;
    },
  },
};
</script>

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