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

2019-11-19 16:34:49

字体：大中小

来源：转载

供稿：网友

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

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

代码：

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Vue.js tab实现选项卡切换

下一篇：Bootstrap fileinput文件上传预览插件使用详解