首页 > 其他分享 >使用Vue来制作导航栏超级简单

使用Vue来制作导航栏超级简单

时间:2022-10-31 19:46:30浏览次数:72  
标签:Vue 导航 超级 简单 使用 div 制作

在我们还没有学习Vue的时候一般都是使用JQ来制作导航栏,但是太复杂。

而使用Vue 来制作你会发现异常简单话不多说上代码

 

css代码随便写一写样式

 

 

HTML 部分,要给div设置一个ID   这里面ul里面是导航栏一列    

下面的div是两个内容页,两种不同的方式但是效果一样

 

 这是JS    首先要去Vue官网下载他的一个插件就是./vue.js

 

标签:Vue,导航,超级,简单,使用,div,制作
From: https://www.cnblogs.com/daiq/p/16845500.html

相关文章

  • vue之项目和其他操作
    一、vue项目目录介绍myfirstvue#项目名字node_modules#文件夹,内部有很多当前项目依赖的模块,可以删除,npminstallpublic......
  • vue.js拓展无法启用
    vue.js拓展无法启用这里我以自己的谷歌浏览器演示C:\Users\维磊\AppData\Local\Google\Chrome\UserData\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\6.4.5_0......
  • vue指令方式实现element table高度随浏览器和部分dom变化适应
    主要代码v-resize="resetTableHeight"//监听高度变化resetTableHeight(){//监听到searchArea高度变化使ivu-table-body高度发生改变if(document.getElements......
  • 比较出名的导航类网站
     网址导航是把很多网站集合起来,按照一定的条件进行分类的网站。网址导航方便网民快速找到自己需要的网站,可以直接到需要的网站,而不必记住各个网站的网址。现在的网址导航......
  • vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
    在使用vuets语言开发项目的过程中,会遇到,导入vue文件后,提示 找不到模块‘xxx.vue’或其相应的类型声明。(Vue3cannotfindmodule)解决方式:在项目根目录新建一个......
  • SQL如何用超级聚合行求合计-ROLLUP
    1,使用实例:SELECTt1,t2,aggregate_function(t3)FROMtableGROUPBYROLLUP(t1,t2);2,ROLLUP的列名称修改,使用实例:SELECT COALESCE(t1,'自定义列名') t1, ......
  • vue-cli项目中,rouer-link点击后无效
    昨日,重构我的vue-cli项目,但是在使用router-link时发现,无论如何点击其都不起反应。症状:鼠标左键点击无效鼠标移上后,(谷歌)浏览器左下角正常显示链接网址网页解析正常,​​<route......
  • vue-cli项目报错:Maximum call stack size exceeded
    ​​Maximumcallstacksizeexceeded​​这个错误,看得出是说调用栈溢出,一般来说自己的代码不至于让调用栈溢出吧,所以这个错误往往是因为循环调用而导致的一种调用循环。即......
  • Echarts——VUE中非根节点时不显示图表也无报错
    前言因为之前的封装都是直接作为根节点封装的,使用this.$el,非根组件的时候使用this.$refs.xx指定即可内容简写<divref="container":id="id"style="height:165px;......
  • vue进阶
    1计算属性#如果{{函数()}},每次页面刷新,函数都会重新执行#函数---》当属性来使用,缓存<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">......