vue制作导航栏html,Vue实现导航栏菜单

本文实例为大家分享了Vue实现导航栏菜单的具体代码，供大家参考，具体内容如下

这里是刚学习vue的时候，没有用vue的任何UI组件库写的导航栏菜单。

menu.html

导航栏左

项目名称

您好，用户！

v-bind:class="{checked: index == nowIndex}"

v-on:click="setTab('menu',index,menus)">

{{ menu.text }}

菜单一的内容

菜单二的内容

菜单三的内容

菜单四的内容

菜单五的内容

菜单六的内容

var nav = new Vue({

el: '#body',

data: {

menus: [

{text: '菜单一'},

{text: '菜单二'},

{text: '菜单三'},

{text: '菜单四'},

{text: '菜单五'},

{text: '菜单六'}

nowIndex: 0,

menu_index: 1

methods: {

setTab: function(name,index,menus){

this.nowIndex = index;

//this.menu_index = index + 1;

}

});

效果图如下：

学会这个之后，大家可以学习下vue的相关UI组件库，那样更简单，做出来的效果也更漂亮哟

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

vue制作导航栏html,Vue实现导航栏菜单相关推荐

vue制作导航栏html,Vue如何实现导航栏菜单的方法
Vue如何实现导航栏菜单的方法发布时间:2020-08-20 09:42:45 来源:亿速云阅读:235 作者:小新这篇文章将为大家详细讲解有关Vue如何实现导航栏菜单的方法,小编觉得挺实用的, ...
vue仿美团饿了么--底部导航公共组件
底部导航栏,是每一个页面都需要用的,所以用的公共组件,在app.vue中引入 import common from "./components/footer/common.vue" ...
前端学习（1994）vue之电商管理系统电商系统之通过编程导航跳转到商品导航界面
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
vue制作日历_如何使用Vue制作每月日历
vue制作日历 Have you ever seen a calendar on a webpage and thought, how the heck did they did that? For ...
vue 井号_使用Vue 2制作井字游戏：第1部分
vue 井号 This tutorial assumes that you have a little prior knowledge of JavaScript and the Vue framew ...
flask 检测post是否为空_用Flask和Vue制作一个单页应用（五）
使用POST向后台发送数据 Flask app修改可以直接使用现有的路由处理函数来接收前端发来的数据,server/app.py中的all_res()修改如下: @app.route('/resou ...
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )
文章目录一.Scaffold 组件二.底部导航栏整体架构三.BottomNavigationBar 底部导航栏四.BottomNavigationBarItem 导航栏条目五.PageVie ...
微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容导航栏样式设置 tabBar导航栏实例一:导航栏样式设置小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: {&q ...
IOS界面元素四栏（状态栏、导航栏、工具栏、TAB栏）设计规范
1 栏 1.1 状态栏状态栏展示于设备和当前环境相关的重要信息. 外观和行为:状态栏总是出现在屏幕顶部,包含网络连接.时间.电量等用户需要的信息在iPhone上,状态栏的颜色会变.而 ...
css导航栏_CSS：创建导航栏
css导航栏 Every website needs a navgation bar to help visitors navigate around the website. This is gen ...

vue制作导航栏html,Vue实现导航栏菜单

vue制作导航栏html,Vue实现导航栏菜单相关推荐

最新文章

热门文章