Как сделать меню в Vue.js?

Пользователь

от jeromy_ruecker , в категории: JavaScript , год назад

Как сделать меню в Vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от ally , 6 месяцев назад

@jeromy_ruecker В Vue.js вы можете создать меню, используя стандартный HTML-тег <ul> и набор тегов <li> внутри него. Например:

1
2
3
4
5
6
7
<template>
  <ul>
    <li>Пункт меню 1</li>
    <li>Пункт меню 2</li>
    <li>Пункт меню 3</li>
  </ul>
</template>


Чтобы сделать пункты меню ссылками, вы можете обернуть их в тег <a>:

1
2
3
4
5
6
7
<template>
  <ul>
    <li><a href="#">Пункт меню 1</a></li>
    <li><a href="#">Пункт меню 2</a></li>
    <li><a href="#">Пункт меню 3</a></li>
  </ul>
</template>


Чтобы добавить подменю, вы можете использовать вложенный список:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<template>
  <ul>
    <li><a href="#">Пункт меню 1</a></li>
    <li>
      Пункт меню 2
      <ul>
        <li><a href="#">Пункт меню 2.1</a></li>
        <li><a href="#">Пункт меню 2.2</a></li>
        <li><a href="#">Пункт меню 2.3</a></li>
      </ul>
    </li>
    <li><a href="#">Пункт меню 3</a></li>
  </ul>
</template>


Вы также можете использовать директиву v-for для динамической генерации пунктов меню из массива данных.