模板

代码如下

html

<template>
<div class="header">
<ul>
<!-- 循环数据在点击调用changeli方法时将当前索引和本条数据传进去,并使用当前数据show的bool值添加或移除样式 -->
<li :class="[{active:item.show}]" @click="changeli(index,item)" v-for="(item,index) in headerData">
<!-- 在这里打印出boll值方便查看 -->
{{item.name}}{{item.show}}
<!-- 判断当前这条数据的bool值如果是true就打开二级菜单,如果是false就关闭二级菜单 -->
<ul v-show="item.show">
<!-- 循环二级菜单数据并使用.stop阻止冒泡 -->
<li v-for="(a,index) in item.list" v-on:click.stop="doThis(index)">{{a}}</li>
</ul> </li>
</ul>
</div>
</template>

js

 export default {
data() {
return {
headerData: [{
name: '导航1',
list: ['子集', '子集', '子集', '子集', '子集'],
show: false
}, {
name: '导航2',
list: ['子集', '子集', '子集', '子集', '子集'],
show: false
}, {
name: '导航3',
list: ['子集', '子集', '子集', '子集', '子集'],
show: false
}, {
name: '导航4',
list: ['子集', '子集', '子集', '子集', '子集'],
show: false
}, {
name: '导航5',
list: ['子集', '子集', '子集', '子集', '子集'],
show: false
}]
}
},
methods: {
changeli: function(ind, item) {
// 先循环数据中的show将其全部置为false,此时模板里的v-if判断生效关闭全部二级菜单,并移除样式
this.headerData.forEach(i => {
// 判断如果数据中的headerData[i]的show属性不等于当前数据的show属性那么headerData[i]等于false
if (i.show !== this.headerData[ind].show) {
i.show = false;
};
});
// 取反(true或false)
item.show = !item.show;
console.log(item.name)
},
doThis: function(index) {
alert(index)
}
}
}

css

 .header {
width: 20%;
background-color: #ff5722;
color: #ffffff;
>ul {
width: 100%;
@include clearfix;
>li {
width: 100%;
border: 1px solid #ffffff;
cursor: pointer; // float: left;
color: 20px;
text-align: center;
line-height: 60px;
&:hover {
background-color: #ff9800;
}
>ul {
width: 100%;
background: red;
li{
&:hover{
background: #c31111;
}
}
}
}
.active {
background-color: #ff9800;
}
}
}

vue实现侧边栏手风琴效果的更多相关文章

  1. 基于css3实现手风琴效果

    终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...

  2. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  3. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  4. JS+JQ手风琴效果

    最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...

  5. 纯CSS手风琴效果

    CSS手风琴效果 主体代码如下:                                                                                     ...

  6. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  7. 一步步教你css3手风琴效果的实现

    什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...

  8. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  9. vue实现全选效果

    vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...

随机推荐

  1. 如何在yarn上运行Hello World(一)

    1.YARN是什么 YARN  (Yet Another Resource Negotiator,另一种资源协调者) 是hadoop上的一种资源调度器,它是一个通用资源管理系统,可以为上层应用提供统一 ...

  2. php-基础知识-apache服务器

    一.支持php的服务器有:iis.apache.lighted(德国制造).nginx(俄罗斯制造,功能强大[反向代理.服务器集群.流媒体服务器........].轻量) 二.今天主要分享apache ...

  3. express整合webpack的打包文件dist

    对于我来说,第一次接触前后端整合问题的小白,刚开始是一脸懵逼,这个问题整整坑了我一个晚上加一个早上,现在写出来总结: 前端开发:vue-cli+webpack: 后台开发:nodejs框架expres ...

  4. 非常详细的 Docker 学习笔记-转载

    文章链接 一.Docker 简介 Docker 两个主要部件: Docker: 开源的容器虚拟化平台 Docker Hub: 用于分享.管理 Docker 容器的 Docker SaaS 平台 --  ...

  5. tee 命令详解

    作用:将数据重定向到文件,另一方面还可以提供一份重定向数据的副本作为后续命令的stdin . 简单的说就是把数据重定向给文件和屏幕上. 注意:存在缓存机制,每1024 字节输出一次, 若从管道接受数据 ...

  6. lesson - 1 aming

    一.  Linux是什么* 关于Linux历史(http://www.aminglinux.com/bbs/thread-6568-1-1.html  需要大家查查资了解,也可以看看5期的视频)* 发 ...

  7. sql sever基本查询语句

    查询(*可代表全部)(<>代表不等于于)select 列名 from 表名(,隔开)where 查询条件order by 排序的列名+连接的数据类型必须兼容(结果为字符串数据的连接 , 如 ...

  8. PCA主成份分析

    1   背景介绍 真实的训练数据总是存在各种各样的问题: 1. 比如拿到一个汽车的样本,里面既有以“千米/每小时”度量的最大速度特征,也有“英里/小时”的最大速度特征,显然这两个特征有一个多余. 2. ...

  9. Python的*args与**kwargs

    当Python的函数的参数不确定时,可以使用*args与**kwargs来指代不定数量的参数. 两者的区别是,*args是个tuple(元组),而**kwargs是个dict(字典). 先通过代码来验 ...

  10. java String 不可变

    关于String不可变的问题也看了很多,最近看了一篇讲的非常好的文章,总结如下 所谓的不可变,并非真的不可变String s = "123"; s = "456" ...