Простое меню Vue.js

Код простого меню на Vue.js. Создаем HTML разметку под меню. Директива :сlass будет подхватывать значение пункта меню(текст) в нижнем регистре.

<ul :class="simple_text.toLocaleLowerCase()">
	<li @click="checkUrl">Home</li>
	<li @click="checkUrl">Projects</li>
	<li @click="checkUrl">Services</li>
	<li @click="checkUrl">Contact</li>
</ul>

Активный пункт будет определяться по названию класса, который мы получили из текста. Например для пункта «Projects» — это класс project(в нижнем регистре).

li {
    cursor: pointer;
    list-style: none;
    display: inline-block;
    padding: 5px 15px;
    background: #eee;
    margin-right: 2px;
}

/*Красим активные пункты другим цветом*/
.home li:nth-child(1),
.projects li:nth-child(2),
.services li:nth-child(3),
.contact li:nth-child(4){
    background: darkseagreen;
}

Получаем текст из кликнутого элемента и присваиваем значение переменной simple_text, которая используется в качестве класса в тегэ ul.

/*Наша функция дергает текст кликнутого элемента*/
checkUrl(item) {
	this.simple_text = item.target.innerHTML;
	console.log(item.target.innerHTML);
},

Другой вариант

Универсальным решение будет передавать значение сразу в функцию:

<li @click="checkUrl("home")">Home</li>

А в Vue будем присваивать переменной переданное значение. Такой вариант подойдет для кириллицы и для пунктов, где количество слов в меню больше 1.

checkUrl(item) {
	this.simple_text = item;	
},

Залитый пример на CodePen