话不多说，直接上代码。

关键：通过点击来改变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. LR12中针对WebServices协议的三种脚本开发模式

    一,webservices协议简介 webservices是建立可交互操作的分布式应用程序的新平台,它通过一系列的标准和协议来保证程序之间的动态连接, 其中最基本的协议包括soap,wsdl,uddi ...

  2. px和em的区别， css权重

    PX特点:px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. EM特点 1. em的值并不是固定的:2. em会继承父级元素的字体大小. 优先级:!important> ...

  3. 在windows+eclipse+git遇到的未修改文件被标记为已修改的问题

    最近遇到2个具体的问题: 1.我们有个工程里面有几个外部jar包,这几个jar包经常会更新,更新的时候如果是在eclipse中执行的,由于windows文件机制,所以会报错无法覆盖这几个jar包.虽然 ...

  4. c#基础之abstract和interface

    一.abstract abstract 的词义是“抽象”,它用来定义抽象类.抽象类不能被实例化只能被继承. 定义抽象类的格式如下:public abstract ClassName{……} 注意:只有 ...

  5. linux下的CPU、内存、IO、网络的压力测试

    linux下的CPU.内存.IO.网络的压力测试  要远程测试其实很简单了,把结果放到一个微服务里直接在web里查看就可以了,或者同步到其他服务器上 一.对CPU进行简单测试: 1.通过bc命令计算特 ...

  6. 针对多条件查询,应对 url 无用 null 值现象处理

    多条件查询 应对 url 无用 null 值现象 处理例如:http://xxoo.b2b.com/orders?city_id=5&repertory_id=7&area_id=39 ...

  7. iOS进阶之如何进行 HTTP Mock（转载）

    这篇文章会对 OHHTTPStubs 源代码的分析,其实现原理是建立在 NSURLProtocol 的基础上的,对这部分内容不了解的读者,可以阅读这篇文章 iOS 开发中使用 NSURLProtoco ...

  8. redis哨兵集群配置

    redis 集群架构图: 需要先配置redis主从,我这边是单机部署的. 采用一主一从,两个sentinel. redis host: 172.31.11.235 redis-master port: ...

  9. Android中的数据储存

    数据的储存是一个十分重要的功能,它涉及到各种类型的数据,各种的储存方式,今天就接触了Android中数据储存的简单应用,有一种方式是可以将存入的数据原封不动的存储起来,这里要用到openfileout ...

  10. Spring history、design philosophy (Spring的历史及设计理念）

    一,Spring的发展史 1,Spring1.x 时代 在Spring1.x时代,都是通过xml文件配置bean,随着项目的不断扩大,需要将xml配置分放到不同的配置文件中,需要频繁的在java类和x ...