<ul>

  <li v-for='item in items' @click="showToggle(item)">

   <i :class="{'iconfont icon-zuojiantou':item.isA,'iconfont icon-down1':!item.isA}"></i>

  </li>

</ul>

data() {
   items: [{
    isA:true,
   },{
    isA:false,
   }]
},

methods: {
  showToggle:function(item){
    item.isA=!item.isA;
  }
}
这样字体图标样式可以任意切换啦

vue中 左侧导航条 多个toggleClass的更多相关文章

  1. vue Element-ui el-menu 左侧导航条

    <template> <!--实现左侧导航条动态渲染(三级)--> <el-menu class="el-menu-vertical-demo" @o ...

  2. React Native中自定义导航条

    这是2017年年初开始的公司的项目,对于导航条的要求很高,Android和iOS上必须用一致的UI,按钮位置还有各种颜色都有要求,而且要适应各种奇葩要求. 尝试了一下当时React Native自带的 ...

  3. vue中的导航守卫

    官方文档地址: 导航守卫:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 好的,重点内容 router.beforeEac ...

  4. Vue中的导航守卫(路由守卫)

    当做Vue-cli项目的时候感觉在路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-router 提供的 beforeEach可以方便地实现全局导航守卫(navigation-g ...

  5. 左侧导航条+中间显示内容+右侧菜单配置,Bootstrap+AdminLTE+Jquery

    1.最近做个导航页面,找了一大堆UI,最终选了AdminLTE,这个UI也是以bootstrap为基础,简单实用,中间内容用jquery的load加载,简单暴力,非常适合快速开发. 2.效果图如下: ...

  6. vue中的导航钩子

    //钩子 登录拦截 router.beforeEach((to, from, next) => { const sessionToken = window.sessionStorage.getI ...

  7. Vue中使用NProgress实现进度条

    简介 NProgress是页面跳转或者发生异步请求是浏览器顶部的进度条 GitHub地址:https://github.com/rstacruz/nprogress 在线演示地址:http://ric ...

  8. Bootstrap每天必学之导航条

    http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...

  9. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

随机推荐

  1. 『超分辨率重建』从SRCNN到WDSR

    超分辨率重建技术(Super-Resolution)是指从观测到的低分辨率图像重建出相应的高分辨率图像.SR可分为两类:    1. 从多张低分辨率图像重建出高分辨率图像    2. 从单张低分辨率图 ...

  2. web前端bug积累

    在将img转换为canvas时,在firefox中,如果img引用的svg使用了fill=(#id),此fill是无效的,可能导致整个转换失效,html2canvas.js也不行.chrome有效,其 ...

  3. Win10 禁止自动更新以及禁止Windows 10升级助手(Windows 10 易升)

    微软目前已经重新启用非常烦人的Windows 10升级助手,现在该助手主要帮助用户自动下载以及安装更新. 彻底禁用: 1.在开始菜单右侧的搜索框中输入关键词控制面板,然后打开控制面板后转到程序与功能里 ...

  4. RS485转USB插电脑上通讯不上

    在确定没有其他问题时,基本可以确定是干扰问题,换个24V电源试试,不要用原来的线 485接口确定,好坏通过两个相反对接,发送信息,两边一致,就可以

  5. 20175212童皓桢 Java实验二-面向对象程序设计实验报告

    20175212童皓桢 Java实验二-面向对象程序设计实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设 ...

  6. web前端学习python之第一章_基础语法(二)

    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  7. Rhino学习教程——1.3

    在主工具栏的工作视窗配置一栏中,有一个背景图工具. 展开是: . 功能是: 放置背景图 移除背景图 移动背景图 缩放背景图 对齐背景图 隐藏背景图/显示背景图 用“图框平面”工具  也可以导入一个图片 ...

  8. 基本promise

    function myPromise(fn) { var value = null, callbacks = []; this.then = function (onFulfilled) { call ...

  9. virtualenv与virtualenvwrapper的配置

    virtualenv是用来创建python虚拟环境的一个工具(python的Scripts目录下virtualev.exe文件),virtualenvwrapper是用来 便于管理virtualenv ...

  10. Linux 动态链接库 - dll劫持

    如何使用动态链接库 Linux下打开使用动态链接库需要三步(实际上和windows下基本一样):1.加载动态链接库,通过调用库函数dlopen()获得链接库的句柄,对应于windows下的 AfxLo ...