Question

我有一个带有汉堡菜单图标的标题，当我点击它时，我想将其更改为十字图标。如何在Vue模板中执行此操作？我在计算属性中创建了一个函数，但我不确定应该怎么做。

这是我的菜单图标：

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

这是我的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%;
}

到目前为止，这是我在脚本标签中的内容：

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

Answer 1

你的意思是这种实施吗？我刚刚在您的代码中添加了v-if和v-else

请查看以下代码段：

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>

我为UI道歉。：）

Vue.js：切换汉堡包菜单图标

1 个答案: