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语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
javascript 面向对象编程基础:封装
Aug 21 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 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
我的论坛源代码(九)
2006/10/09 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
网站上面有这种切换效果
2006/06/26 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
python实现网页链接提取的方法分享
2014/02/25 Python
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
python实现与redis交互操作详解
2020/04/21 Python
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
农场厂长岗位职责
2013/12/28 职场文书
初中英语教学反思
2014/01/25 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
政工例会汇报材料
2014/08/26 职场文书
食品安全承诺书范文
2014/08/29 职场文书
出纳工作检讨书
2014/10/18 职场文书
大学生志愿者心得体会
2016/01/15 职场文书