nativeui 的定制版本用于创建服务器端训练器和称为 vmenu 的菜单。它具有完整的权限支持，允许服务器所有者控制谁可以做什么。
显示虚拟菜单用户界面的菜单是一个灵活的元素。它显示具有多种用途的弹出窗口，例如呈现选项菜单。它们可以与按钮、工具栏或应用栏结合使用。
为了了解有关单击显示菜单时一次仅显示一个虚拟菜单的更多信息，让我们看一下以下示例。
示例考虑以下示例，当我们单击在网页上显示菜单时，一次仅显示一个虚拟菜单。
<!doctype html><html> <body> <script src=https://unpkg.com/babel-polyfill/dist/polyfill.min.js></script> <script src=https://unpkg.com/vue@2.x/dist/vue.js></script> <script src=https://unpkg.com/vuetify@2.6.9/dist/vuetify.min.js></script> <div id=tutorial> <v-app> <div> <v-menu :open-on-hover=true :open-on-click=true v-for=(user, index) in userinfo nudge-top=50px :key=index v-model=show[index] top> <template v-slot:activator={ on, attrs }> <v-avatar v-on=on size=24 color=blue> <span>{{user.name}}</span> </v-avatar> </template> <span>{{user.favoritecar}} <span> </v-menu> <v-btn @click=showtooltip>button</v-btn> </v-app> </div> <script> new vue({ el: #tutorial, vuetify: new vuetify(), data() { return { userinfo: [{ id: 1, name: x, favoritecar: rx100 }, { id: 2, name: y, favoritecar: ducati }, { id: 3, name: z, favoritecar: rangerover }], show: [false, false, false, false] }; }, methods: { showtooltip() { console.log(open tooltip); vue.set(this.show, 2, true); } } }); </script> </body></html>
运行上述脚本时，将弹出输出窗口，显示列表选项以及网页上的单击按钮。当用户单击该按钮时，它将在网页上显示列表的三个项目。
示例在以下示例中，我们运行脚本以在单击网页上显示的按钮时显示虚拟菜单。
<!doctype html><html> <body> <script src=https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js></script> <script src=https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js></script> <link href=https://fonts.googleapis.com/css?family=roboto:100,300,400,500,700,900 rel=stylesheet> <link href=https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css rel=stylesheet> <link href=https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css rel=stylesheet> <div id=tutorial> <v-app> <div> <v-menu> <template v-slot:activator={ on }> <v-btn v-on=on>select</v-btn> </template> <transition-group tag=items name=fade> <v-list-item v-if=!t @click=t=!t key=1> <v-list-item-title>msd</v-list-item-title> </v-list-item> <v-list-item v-else @click=t=!t key=2> <v-list-item-title>virat</v-list-item-title> </v-list-item> </transition-group> </v-menu> </div> </v-app> </div> <script> new vue({ el: '#tutorial', vuetify: new vuetify(), data: () => ({ t: true }) }) </script> </body></html>
当脚本执行时，它将生成一个由网页上的单击按钮组成的输出。当用户单击该按钮时，将显示第一个键的虚拟菜单，如果用户再次单击该按钮，将显示第二个键的虚拟菜单。
以上就是如何在点击显示菜单时一次只显示一个v菜单？的详细内容。