学习一段时间Vue.js，于是想尝试着做一个像微信平台里那样的菜单编辑器，在这里分享下
具体样式代码查看项目github
创建一个vue实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
</head>
<body>
<div class="content" style="width:900px;margin:0 auto;">
<!-- vue实例挂载的DOM元素 -->
<div id="app-menu">
<!-- 菜单预览界面 -->
<div class="weixin-preview"></div>
<!-- 菜单编辑界面 -->
<div class="weixin-menu-detail"></div>
</div>
</div>
<script>
var app = new Vue({
el: '#app-menu',//挂载到对应的DOM元素
data: {
weixinTitle: 'Vue.js公众号菜单',
//菜单对象
menu: {
"button": [
{
"name": "主菜单1",
"sub_button": [] },
{
"name": "主菜单2",
"sub_button": [] },
{
"name": "主菜单3",
"sub_button": [
{
"name": "子菜单1"
}] }] },
selectedMenuIndex:'',//当前选中菜单索引
selectedSubMenuIndex:'',//当前选中子菜单索引
},
methods: {
}
})
</script>
</body>
</html>
将菜单数据渲染到模版上
这里使用v-if和v-for将数据渲染到模版上，最多会有3个主菜单以及每个主菜单最多会有5个子菜单。
<div class="weixin-preview">
<div class="weixin-hd">
<div class="weixin-title">{{weixinTitle}}</div>
</div>
<div class="weixin-bd">
<ul class="weixin-menu">
<!-- 这里使用v-for开始循环主菜单 -->
<li v-for="(btn,i) in menu.button" class="menu-item">
<div class="menu-item-title">
<span>{{ btn.name }}</span>
</div>
<ul class="weixin-sub-menu">
<!-- 这里使用v-for开始循环主菜单下的子菜单 -->
<li v-for="(sub,i2) in btn.sub_button" class="menu-sub-item">
<div class="menu-item-title">
<span>{{sub.name}}</span>
</div>
</li>
<!-- 这里使用v-if 判断子菜单小于5个，则添加按钮来添加子菜单 -->
<li v-if="btn.sub_button.length<5" class="menu-sub-item">
<div class="menu-item-title">
<i class="icon14_menu_add"></i>
</div>
</li>
</ul>
</li>
<!-- 这里使用v-if 判断主菜单小于3个，则添加按钮来添加主菜单 -->
