<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. Linux压缩与解压缩文件

    1 将tgz文件解压到指定目录. tar zxvf test.tgz -C 指定目录 比如:将 test.tgz 解压到 /home目录:tar zxvf test.tgz -C /home 2 将指 ...

  2. Matlab内嵌图像

    在数值分析中我们通常需要将数据可视化成图像的形式作为我们分析结果的有效性的途径,常用的画图函数有:$\tt plot$,$\tt surf$,$\tt mesh$...当然,我们有时需要多窗口显示图像 ...

  3. 使用cookie保存用户名和密码

    效果图如下 从数据库中随意使用一个账号登录 登陆成功来到人中心 返回登录界面 实现代码如下 package com.test.controller; import java.io.IOExceptio ...

  4. 老男孩九期全栈Python之基础一

    ---恢复内容开始--- day1 12.while 体验while的执行方式和效果,用多种方法输出1~100 while 1: print('我们不一样') print('在人间') print(' ...

  5. CSS：margin和padding之谜

    margin外边距,padding内边距.光看书本的介绍,理解起来好费劲,那咱就举个荔枝:你家的保险箱,是那种镶在墙壁里的,保险箱与墙壁的距离就是margin,保险箱壁就是所谓的border,保险箱与 ...

  6. 六、Linux的用户和组

    1． 用户的管理 useradd 添加一个用户 useradd test 添加test用户 useradd test -d /home/t1  指定用户home目录 或者直接  adduser tes ...

  7. 【持续更新】JAVA面向对象多线程编程的一些tips

    sleep()和wait()的区别 sleep()方法是Thread类的方法,wait()方法是Object类的方法. 调用sleep()方法的过程中,线程不会释放对象锁,睡眠时间一过,就又开始执行. ...

  8. H5横向滚动提示

    <marquee>啦啦啦,Hello World</marquee>

  9. idea提交项目到码云上

    参考 https://www.cnblogs.com/BaleW/p/9293184.html

  10. static易错点

    package com.juemuren.Error; /** * static关键字的易错点 */class SuperClass{    static{        System.out.pri ...