Vue.js手风琴菜单组件开发实例


Posted in Javascript onMay 16, 2017

本文为大家分享了vuejs组件开发之手风琴菜单组件实例,供大家参考,具体内容如下

小图标是引入font-awesome字体图标库绘制的。效果如下图所示:

Vue.js手风琴菜单组件开发实例

代码:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>index</title>
 <link rel="stylesheet" href="css/font-awesome.min.css">
 <link rel="stylesheet" href="css/index.css">
 <script type="text/javascript" src="../lib/vue.min.js"></script>
 <script type="text/javascript" src="../lib/jquery-1.11.3.min.js"></script>
 <style>
 * {
 margin: 0;
 padding: 0;
 }

 body {
 padding-top: 100px;
 }

 #tabPanel {
 width: 120px;
 height: auto;
 margin: 0 auto;
 }

 #tabPanel .item .sildermun ul li {
 height: 40px;
 line-height: 40px;
 list-style: none;
 }

 #tabPanel .item .sildermun ul li:hover {
 background: #ccc;
 }

 #tabPanel .item .menutitle {
 height: 40px;
 line-height: 40px;
 text-align: center;
 background: #ccc;
 }

 #tabPanel .item .sildermun {
 text-align: center;
 background: #eee;
 }
 </style>
</head>

<body>

 <div id="tabItem">
 <slider-item></slider-item>
 <slider-item></slider-item>
 <slider-item></slider-item>
 <slider-item></slider-item>
 </div>

 <!--组件模板,也可以使用template标签方式引入模板-->
 <template id="tab">
 <div id="tabPanel">
 <div class="item">
 <div class="menutitle" @click="toggle()"><i class="icon-th-list"></i> {{parentItem}}</div>
  <div class="sildermun" v-show="status">
  <ul>
  <li v-for="(index,v) in childItems"><i class="icon-star"></i> {{v+index}}</li>
  </ul>
  </div>
 </div>
 </div>
 </div>
 </template>
 <!--组件模板,也可以使用template标签方式引入模板-->
</body>

</html>
<script>
 var vue = new Vue({
 el: "#tabItem",
 data: {

 },
 components: {
 'slider-item': {
 template: '#tab',
 data: function() {
  return {
  status: false,
  parentItem: "父级菜单",
  childItems: ["子级菜单", "子级菜单", "子级菜单", "子级菜单"]
  }
 },
 methods: {
  //切换滑块
  toggle: function() {
  this.status = !this.status;
  }
 }
 }
 }
 });
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 自动填写表单的实现方法
Apr 09 Javascript
jquery插件之easing使用
Aug 19 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
纯js实现手风琴效果
Apr 17 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
react中的ajax封装实例详解
Oct 17 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 #Javascript
js自定义瀑布流布局插件
May 16 #Javascript
简单实现js点击展开二级菜单功能
May 16 #Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 #Javascript
jQuery实现div跟随鼠标移动
Aug 20 #jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 #jQuery
bootstrap响应式表格实例详解
May 15 #Javascript
You might like
树型结构列出指定目录里所有文件的PHP类
2006/10/09 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php创建多级目录的方法
2015/03/24 PHP
PHP asXML()函数讲解
2019/02/03 PHP
js window.print实现打印特定控件或内容
2013/09/16 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
python pygame实现五子棋小游戏
2020/10/26 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
科长竞争上岗演讲稿
2014/05/12 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
保洁员岗位职责
2015/02/04 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
python中subplot大小的设置步骤
2021/06/28 Python