How to show only one V menu at a time when clicking to show menu?-JS Tutorial-php.cn

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

WBOY

Release： 2023-08-29 10:05:02

forward

1414 people have browsed it

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>

Copy after login

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>

Copy after login

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!