本文將為大家介紹Vue的一個橫向菜單demo，該demo可以用于網頁的導航欄或者其他需要橫向展示的菜單中。該demo具有簡潔、美觀、易于修改等特點，適合不同需求的網頁使用。

首先，我們需要將Vue引入html中。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

接著，我們需要定義一個Vue實例，并在該實例中聲明必須的data、methods、computed等選項。

<script>
// 定義Vue實例
const vm = new Vue({
// 選項
el: '#app',  // 渲染位置
data: {
// 數據
activeIndex: 0,  // 當前選中的菜單
menuList: [{name: '首頁', url:'/index', isActive: true}, {name: '產品', url:'/product', isActive: false}, {name: '關于', url:'/about', isActive: false}, {name: '服務', url:'/service', isActive: false}]  // 菜單列表
},
methods: {
// 方法
changeActive(index) {  // 點擊菜單切換
this.menuList[this.activeIndex].isActive = false;  // 取消之前選中的樣式
this.menuList[index].isActive = true;  // 當前選中的樣式
this.activeIndex = index;  // 更新當前選中的菜單序號
}
},
computed: {
// 計算屬性
activeMenu() {  // 當前選中的菜單
return this.menuList[this.activeIndex];
}
}
});
</script>

最后，在html中添加菜單的顯示：

<div id="app">
<ul>
// 遍歷菜單列表
<li v-for="(menu, index) in menuList" :key="index" :class="{ 'active': menu.isActive }" @click="changeActive(index)">
<a :href="menu.url">{{ menu.name }}</a>
</li>
</ul>
<p>當前選中的是：{{ activeMenu.name }}</p>  // 顯示當前選中的菜單
</div>

以上就是Vue橫向菜單demo的主要代碼，通過Vue實現了數據驅動，點擊菜單切換時，只需要修改數據中的isActive屬性即可，而不需要再手動操作CSS樣式，大大提高了開發效率。另外，如果需要修改菜單的樣式，只需要修改CSS即可。