话不多说，直接上代码。

关键：通过点击来改变thisindex ，又thisinde == index来控制class是否含active来控制样式

简单效果如下：

vue做nav切换的更多相关文章

  1. vue实现tab切换功能

    最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...

  2. 使用vue做项目

    使用vue做项目需要用到node.js的npm来管理包 所以我们需要先下载node.js然后通过node的npm来管理包  安装完 nodejs后 我们需要执行 npm install vue-cli ...

  3. vue实现菜单切换

    vue实现菜单切换,点击菜单导航切换不同的内容以及为当前点击的选项添加样式,或者组件. method里: css: html代码: <nav> <ul> <li> ...

  4. 使用Privoxy做智能代理切换

    使用Privoxy做智能代理切换 You take the blue pill, the story ends, you wake up in your bed, and believe whatev ...

  5. 用vue做app内嵌页遇到的坑

    公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页.开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了. 众所周 ...

  6. vue做的第二个app

    用vue做应用最好的还是组件的复用上次做饿了吗的app封装了一个评分star的组件只要引入组件传入size大小和score分数就行了,这次做豆瓣直接就就用上了不用重复写代码.不过vue做单页应用全部挂 ...

  7. vue 实现tab切换动态加载不同的组件

    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...

  8. vue点击切换颜色限制个数（用了mui框架）

    vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...

  9. Vue 做项目经验

    Vue 做项目经验 首先需要知道最基本的东西是: Vue 项目打包:npm run build Vue生成在网页上看的端口:npm run dev 修改端口号的地方在: config文件夹下index ...

随机推荐

  1. Visual Studio Git本地Repos和GitHub远程Repos互操作

    近期准备将一个项目开源到GitHub中,N-Sharding,.Net版本的分库分表数据访问框架.中间遇到了点小问题,整理了一下. 1. GitHub上Create New Repos 2. 代码Ch ...

  2. JavaScript自定义事件和触发(createEvent, dispatchEvent)

    $(dom).addEvent("ft", function() { alert("走起"); }); // 创建 var evt = document.cre ...

  3. Atom读写MarkDown插件选择，以及墙内安装markdown-preview-enhanced，及markdown和mermaid使用教程

    1.Atom自带markdown-preview 功能太少,需要大量拓展. 2.markdown-preview-plus 功能还不错,但是其中的滚动条插件markdown-scroll-sync和最 ...

  4. SQL 连接（内连接，外连接）

    内连接 现在有两张表,学生表student1,成绩表SC1,两张表的数据如下 现在要对两张表做连接查询,连接一般需要写条件,where 或者 on 后面 , select * from student ...

  5. Java多线程编程的常见陷阱

    .在构造函数中启动线程 我在很多代码中都看到这样的问题,在构造函数中启动一个线程,类似这样: public class A{ public A(){ ; ; this.thread=new MyThr ...

  6. window.location.search 在url中有？name=value时仍为‘’的情况

    1,当页面有hash#值 而?name=value在hash #的串后面将会有这种结果 2,为什么 window.location.search 为空? 答:注意上面的search和hash的区别,如 ...

  7. zabbix3.4实现sendEmail邮件报警

    一.安装软件 wget http://caspian.dotconf.net/menu/Software/SendEmail/sendEmail-v1.56.tar.gz 创建目录 mkdir /us ...

  8. Linux 主要目录速查表

    /:根目录,一般根目录下只存放目录,在 linux 下有且只有一个根目录,所有的东西都是从这里开始 当在终端里输入 /home,其实是在告诉电脑,先从 /(根目录)开始,再进入到 home 目录 /b ...

  9. spring框架-jdbc

    一.实体层的不同名字    entity 实体类 :就是和数据库表一一对应的JavaBean  pojo 简单的java对象:任何应用场景的JavaBean  po 持久化对象 :就是和数据库表一一对 ...

  10. spring boot使用mongodb时，xxxRepository不能Autowired的问题

    默认情况下,当继承MongoRepository的CRUD在@SpringBootApplication的子包下时,xxxRepository是能够自动被扫描和创建代理的.但是如果不在默认路径下,就无 ...