Как сделать меню в Vue.js?
Как сделать меню в Vue.js?
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 для динамической генерации пунктов меню из массива данных.
15