话不多说，直接上代码。

关键：通过点击来改变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. x509证书相关内容

    什么是证书 X.509证书,其核心是根据RFC 5280编码或数字签名的数字文档.    实际上,术语X.509证书通常指的是IETF的PKIX证书和X.509 v3证书标准的CRL 文件,即如RFC ...

  2. Blender学习

    学习顺序(下面为引用他人的视频或博客) 51个必须知道的blender操作 https://www.bilibili.com/video/av4619930/ Blender常用快捷键一览表 http ...

  3. calss 类

    class Role(object): n = 123 # 类变量,像__init__中life_value,money默认参数用类变量,如果多个类的实例那就节省了内存,类变量只在类中存一份,实例中不 ...

  4. JDBC中常用的接口

    JDBC常用的接口DriverManager 驱动管理器获得数据库链接 Connection 数据库链接接口 Statement 语句接口,用来静态操作SQL语句 PreparedStatement ...

  5. 51nod1268 和为K的组合（DFS）

    1268 和为K的组合  基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 给出N个正整数组成的数组A,求能否从中选出若干个,使他们的和为K.如果可以 ...

  6. Java8分组(groupingBy)

    1.分组,计数,排序 public class Java8Example1 { public static void main(String[] args) { List<String> ...

  7. 初试fiddler

    1.tools->Options->HTTPS勾:Decrypt HTTPS traffic //勾:Ignore server certificate errors(unsafe) // ...

  8. 【题解】Luogu P4097 [HEOI2013]Segment

    原题传送门 这珂以说是李超线段树的模板题 按着题意写就行了,时间复杂度为\(O(n\log^2n)\) #include <bits/stdc++.h> #define N 40005 # ...

  9. 读 vue 源码一 （为什么this.message能够访问data里面的message）

    12月离职后,打算在年后再找工作了,最近陆陆续续的看了黄轶老师的vue源码解析,趁着还有几天过年时间记录一下. 目标:vue如何实现通过this.key,就能直接访问data,props,method ...

  10. 查看mysql中sql语句执行时间

    查看mysql版本:select version();方法一: show profiles.1. Show profiles是5.0.37之后添加的,要想使用此功能,要确保版本在5.0.37之后.  ...