search

Home  >  Article  >  Web Front-end  >  How to show only one V menu at a time when clicking to show menu?

How to show only one V menu at a time when clicking to show menu?

WBOY
WBOYforward
2023-08-29 10:05:021404browse

How to show only one V menu at a time when clicking to show menu?

The task we are going to perform in this article is how to display only one v-menu at a time on click of show menu, let’s read this article in-depth to understand v-menu better.

A customized version of NativeUI is used to create server-side trainers and menus called vMenu. It has full permissions support, allowing server owners to control who can do what.

Show virtual menu

The user interface menu is a flexible element. It displays pop-ups that serve multiple purposes, such as presenting a menu of options. They can be used in conjunction with buttons, toolbars, or app bars.

To learn more about showing only one virtual menu at a time when clicking Show Menu, let's take a look at the following example.

Example

Consider the following example, when we click to show the menu on the web page, only one virtual menu is displayed at a time. 

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

When you run the above script, an output window will pop up showing list options and click buttons on the web page. When the user clicks the button, it displays the three items of the list on the web page.

Example

In the following example, we run a script to display a virtual menu when a button displayed on a web page is clicked. 

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

When the script executes, it will generate an output consisting of clicked buttons on the web page. When the user clicks the button, the virtual menu for the first key is displayed, and if the user clicks the button again, the virtual menu for the second key is displayed.

The above is the detailed content of How to show only one V menu at a time when clicking to show menu?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to create an array containing partial objects from another array in JavaScript?Next article：How to create an array containing partial objects from another array in JavaScript?

Related articles

See more