话不多说，直接上代码。

关键：通过点击来改变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. 网络-02-端口号-linux端口详解大全

    端口详解 1 tcpmux TCP Port Service Multiplexer 传输控制协议端口服务多路开关选择器  2 compressnet Management Utility compr ...

  2. POSIX

    API: POSIX (编译前的源代码) ABI: APPLICATION BINARY INTERFACE (编译后的二进制文件,linux & windows不兼容) ---------- ...

  3. 项目遇到的小问题（关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答）

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  4. datatable的select()结果直接修改，会体现在表上

    如果你只是要修改DataTable里的DataRow的话没有必要找到它的行号,直接在Select后得到的DataRow上修改就行了,它的修改会直接反映到DataTable上(其实就是直接修改了Data ...

  5. Class打包成jar

    Class打包成jar 现在我的文件夹的目录在: C:\Users\linsenq\Desktop\cglibjar 我要把位于这个目录下的所有文件夹以及这个文件夹下的.class文件打成jar包 第 ...

  6. centos7.4卸载再安装mariadb服务无法启动问题

    今天yum安装MariaDB完成后,启动服务时一直报以下错误 Job for mariadb.service failed. See ‘systemctl status mariadb.service ...

  7. 使用aspx 直接生成excel

    <%@ Page Language="C#" EnableEventValidation="false" ResponseEncoding="g ...

  8. Emote木马分析

    前言:网上找的样本是EXE的,没有邮件样本,所以只做了exe分析. 一.Emote木马相关信息 文件: C:\Users\Desktop\Samp.exe 大小: 249856 bytes 文件版本: ...

  9. 常用VIM插件配置

    airline 状态栏美化 除了airline本体还要下airline主题 和打过powerline补丁的字体 常用设置: set laststatus=2 " 总是显示状态栏 set no ...

  10. InvalidArgumentError: ConcatOp : Dimensions of inputs should match: shape[0] = [1,136,240,64] vs. shape[1] = [1,135,240,64]

    初始输入图片大小为1600*1200,设置的输入网络的最大测试图片大小为1600*1200相当于scale =1 ,运行没有问题.之后输入图片大小为1920*1080,测试图片大小为1920*1080 ...