Vue 문서의 트리 메뉴 구현 프로세스에 대한 자세한 설명-View.js-php.cn

Vue 문서의 트리 메뉴 구현 프로세스에 대한 자세한 설명

WBOY

풀어 주다： 2023-06-21 09:10:51

원래의

2246명이 탐색했습니다.

Vue는 개발자가 효율적이고 유지 관리하기 쉬운 웹 애플리케이션을 구축하는 데 도움이 되는 많은 유용한 도구와 구성 요소를 제공하는 인기 있는 JavaScript 프레임워크입니다. 그 중 하나가 트리 메뉴 구성 요소입니다. 이 기사에서는 Vue 문서의 트리 메뉴 구현 프로세스를 소개하고 자세한 코드 예제를 제공합니다.

Vue에서 트리 메뉴를 생성하는 것은 매우 쉽습니다. 몇 단계만 따르시면 됩니다:

트리 메뉴에 대한 기본 템플릿 정의:

Vue의 템플릿 구문을 사용하여 기본을 정의할 수 있습니다. 트리 메뉴 개요는 다음과 같습니다. :

<template>
  <div class="tree">
    <ul>
      <li v-for="node in treeData">
        {{ node.label }}
        <ul v-if="node.children">
          <li v-for="childNode in node.children">
            {{ childNode.label }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

로그인 후 복사

위 템플릿 코드에서는 단일 div 요소가 포함된 트리 메뉴 구성 요소를 만듭니다. 또한 v-for 지시문을 사용하여 데이터를 반복하고 중첩된 li 요소와 ul 요소를 생성하여 트리 구조를 표시했습니다. 현재 노드의 레이블 텍스트는 li 요소 내부에 렌더링됩니다. div元素的树形菜单组件。我们也使用了v-for指令来遍历数据并生成嵌套的li元素和ul元素来显示树形结构。当前节点的标签文本将被呈现在li元素内部。

定义组件的数据属性：

在Vue中，组件的数据可以存储在data属性中。我们需要在我们的组件中定义一个treeData属性，这是一个包含树形菜单的数据格式。

<script>
  export default {
    name: "TreeMenu",
    data() {
      return {
        treeData: [
          {
            id: 1,
            label: "Fruits",
            children: [
              { id: 2, label: "Apple" },
              { id: 3, label: "Banana" },
              { id: 4, label: "Orange" }
            ]
          },
          {
            id: 5,
            label: "Vegetables",
            children: [
              { id: 6, label: "Carrot" },
              { id: 7, label: "Potato" },
              { id: 8, label: "Onion" }
            ]
          }
        ]
      };
    }
  };
</script>

로그인 후 복사

上面的代码中即定义了一个简单的树形菜单数据。每个节点都包含id,label和children属性。children属性保存了另一个节点的数组，该数组可用于构建整个树形菜单。

树形菜单中的交互逻辑：

Vue提供了多种方法引入和处理交互逻辑。这里，我们使用methods属性定义一个简单的函数来处理节点单击事件，以控制节点的展开和收缩。

<script>
  export default {
    name: "TreeMenu",
    data() {
      return {
        treeData: [
          {
            id: 1,
            label: "Fruits",
            expanded: false,
            children: [
              { id: 2, label: "Apple" },
              { id: 3, label: "Banana" },
              { id: 4, label: "Orange" }
            ]
          },
          {
            id: 5,
            label: "Vegetables",
            expanded: false,
            children: [
              { id: 6, label: "Carrot" },
              { id: 7, label: "Potato" },
              { id: 8, label: "Onion" }
            ]
          }
        ]
      };
    },
    methods: {
      toggleNode(node) {
        node.expanded = !node.expanded;
      }
    }
  };
</script>

로그인 후 복사

上面的代码中，我们添加了一个expanded属性来控制节点的展开和收缩状态。点击树中的节点时，会触发toggleNode()函数，从而将节点的展开和收缩状态切换。

在视图中绑定点击事件

将之前定义的toggleNode()函数绑定到节点的单击事件上

<template>
  <div class="tree">
    <ul>
      <li v-for="node in treeData" :key="node.id">
        <span @click="toggleNode(node)">
          {{ node.label }}
        </span>
        <ul v-if="node.children && node.expanded">
          <li v-for="childNode in node.children" :key="childNode.id">
            <span @click="toggleNode(childNode)">
              {{ childNode.label }}
            </span>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

로그인 후 복사

上述代码添加了一个绑定单击事件的span元素，并调用toggleNode()

data

treeData

id

label

children

methods

expanded

toggleNode()

span

toggleNode()