Nav bar codes that I'm not understanding-CodePudding

I was going through these codes and I'm not understanding some codes on here. Can anyone help me? It's a simple nav menu bar and here's the codes that I'm not understanding.

<ul:> <<< This

<div @click="showMenu = !showMenu" > <<< This

<script>
export default {
  data() {
    return {
      showMenu: false,
    };
  },
};
</script>

The full code is here.

<template>
  <div>
    <div>
      <nav>
        <div>
          <router-link to="/">Logo</router-link>
          <!-- Menu button Mobile -->
          <div @click="showMenu = !showMenu" >
            <button type="button">// svg icon here</button>
          </div>
        </div>

        <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
        <ul:>
          <li>Home</li>
          <li>About</li>
          <li>Blogs</li>
          <li>Contact Us</li>
        </ul>
      </nav>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showMenu: false,
    };
  },
};
</script>

CodePudding user response：

in this line <div @click="showMenu = !showMenu" > there is a div when clicked it will toggle the value of showMenu to false if it is true and the opposite . changing this state is affecting this ul <ul:> if showMenu = true the class of this ul will be flex if showMenu = false the class will be hidden

NOTE : @click is just a shorthand of v-on:click in vue.js