小编Rak*_*oni的帖子

我dropdown在 vuejs 中使用菜单组件来制作普通的下拉菜单。我的dropdown组件代码是：

<template>
    <span class="dropdown" :class="{shown: state}">
        <a href="#" @click.prevent="toggleDropdown" class="dropdown-toggle">toggle menu</a>
            <div class="dropdown-menu" v-show="state">
                <ul class="list-unstyled">
                    <slot></slot>
                </ul>
            </div>
        </transition>
    </span>
</template>

<script>
export default {
    name: 'dropdown',
    data () {
        return {
            state: false
        }
    },
    methods: {
        toggleDropdown (e) {
            this.state = !this.state;
        }
    }
}
</script>

现在我通过在模板中使用以下代码在dropdown我的VUE应用程序中的不同位置导入组件

<dropdown>
    <li>
         Action
    </li>
</dropdown>

现在工作正常，但我希望同时只有一个下拉菜单处于活动状态。

我做了很少的研究，发现我可以使用像https://github.com/davidnotplay/vue-my-dropdown这样的插件，但我不想使用它。同样，我还研究了上述示例的工作原理，但我想以我的dropdown组件处理与下拉菜单相关的所有事件的方式来实现此下拉菜单功能。那么你能帮我实现这个目标吗？

我正在开发一个具有不同vuejs app实例的项目.

main-project
    > app1
        > src
        > build
        -- main.js
        -- App.vue
        -- package.json
    > app2
        > src
        > build
        -- main.js
        -- App.vue
        -- package.json
    > app3
        > src
        > build
        -- main.js
        -- App.vue
        -- package.json
        .
        .
        .
        .

我创建了使用这些应用程序vue-cli:vue init webpack app1,vue init webpack app2等等.当我使用webpack以下文件构建这些应用程序时

main-project
    > dist
        > assets
            > app1
                -- app.css
                -- vendor.js
                -- app.js
                -- manifest.js
            > app2
                -- app.css
                -- vendor.js
                -- …

我有一些json数组数据有数百个对象,数据结构类似于以下

var json = [{"id":"123","name":"user"},{"id":"124","name":"user2"},{"id":"125","name":"user4"}]

我正在使用以下函数创建dropdown使用此数据(ul和li)

var newhtml = $("<div/>");
json.forEach(function (e) {
  newhtml.append('<li>'+e.name+'</li>');
});
$('ul').append(newhtml.html());

这工作正常,但问题是如果json data接近千,它会减慢.我已经google了,发现了几种方法,其中包括:

• 避免追加li到ul每一次.所以我只在forEach循环后追加一次.它优化的东西不是那么多.

现在我的问题是如何使用优化方式使用json数据创建html？