- <!DOCTYPE html>
- <HTML>
- <head lang="en">
- <meta charset="UTF-8">
- <title>
- 实现二级菜单 vue
- </title>
- <script src="vue.min.js">
- </script>
- <style>
- </style>
- </head>
- <body>
- <div id="my">
- <ul>
- <li v-for="item in lists">
- <a @click="show(item)">
- {{item.name}}
- </a>
- <ul v-show="item.isShow">
- <li v-for="sub in item.sub">
- {{sub.name}}
- </li>
- </ul>
- </li>
- </ul>
- </div>
- <script>
- Windows.onload = function() {
- new Vue({
- el: '#my',
- data: {
- lists: [{
- name: '流行',
- isShow: false,
- sub: [{
- name: '就'
- },
- {
- name: '是'
- }]
- },
- {
- name: '流行 1',
- isShow: true,
- sub: [{
- name: '就 1'
- },
- {
- name: '是 1'
- }]
- }]
- },
- methods: {
- show: function(v) {
- this.lists.forEach(function(item) {
- item.isShow = false;
- });
- v.isShow = !v.isShow
- }
- }
- })
- }
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-2911732.html