Vue.js: toggle hamburger menu icons

问题:

I have a header with a hamburger menu icon which I want to change to a cross icon when I click on this. How to do this in the Vue template? I created a function in the computed property but I am not sure what I should do.

Here is my menu icon:

<div class="top-icon" :class="toggleTopMenu" @click="showTopMenu = !showTopMenu">
  <div class="main-item menu">
    <span class="line line01"></span>
    <span class="line line02"></span>
    <span class="line line03"></span>
  </div>
</div>

This is my CSS:

.top-icon {
  background: #29afd1;
  display: inline-block;
  border-radius: 500px;
  margin: 10px;
  position: relative;
  padding: 80px;
  cursor: pointer;
}

.main-item {
  width: 150px;
  height: 150px;
  position: relative;
}

.line {
  position: absolute;
  height: 15px;
  width: 100%;
  background: white;
  border-radius: 10px;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
}

.line01 {
  top: 19%;
}

.line02 {
  top: 49%;
}

.line03 {
  top: 79%;
}

.menu.close .line01 {
  transform: rotate(45deg);
  top: 49%;
}

.menu.close .line02, .menu.close .line03 {
  transform: rotate(-45deg);
  top: 49%;
}

So far, this is what I have inside script tags:

data() {
  return {
    showTopMenu: false,
  };
},
computed: {
toggleTopMenu() {},

回答1:

Do you mean this kind of implementation? I just added v-if and v-else on your code

Please check the snippet below:

new Vue({
  el: "#app",
  data: {
    showTopMenu: false,
  }
})

.top-icon {
  background: #29afd1;
  display: inline-block;
  border-radius: 500px;
  margin: 10px;
  position: relative;
  padding: 80px;
  cursor: pointer;
}

.main-item {
  width: 150px;
  height: 150px;
  position: relative;
}

.line {
  position: absolute;
  height: 15px;
  width: 100%;
  background: white;
  border-radius: 10px;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
}

.line01 {
  top: 19%;
}

.line02 {
  top: 49%;
}

.line03 {
  top: 79%;
}

.menu.close .line01 {
  transform: rotate(45deg);
  top: 49%;
}

.menu.close .line02, .menu.close .line03 {
  transform: rotate(-45deg);
  top: 49%;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">
  <div class="top-icon" class="toggleTopMenu" @click="showTopMenu = !showTopMenu">
    <div class="main-item menu" v-if="!showTopMenu">
      <span class="line line01"></span>
      <span class="line line02"></span>
      <span class="line line03"></span>
    </div>
    <div v-else>
      X
    </div>
  </div>
</div>

I apologize about the UI though. :)