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

我有一个带有汉堡包菜单图标的标题，当我点击它时，我想把它变成一个十字图标。如何在Vue模板中执行此操作？我在computed属性中创建了一个函数，但我不确定应该做什么

这是我的菜单图标：

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

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

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

---

你是说这种实现方式吗？ 我刚刚在代码中添加了

v-if

和

v-else

请检查下面的代码段：

newvue({
el:“应用程序”，
数据：{
showTopMenu:false，
}
})

.top图标{
背景：#29afd1；
显示：内联块；
边界半径：500px；
利润率：10px；
位置：相对位置；
填充：80px；
光标：指针；
}
.主要项目{
宽度：150px；
高度：150像素；
位置：相对位置；
}
.线路{
位置：绝对位置；
高度：15px；
宽度：100%；
背景：白色；
边界半径：10px；
过渡：全立方贝塞尔（0.25,0.1,0.28,1.54）0.32s；
}
.line01{
最高：19%；
}
.line02{
最高：49%；
}
.line03{
最高：79%；
}
.menu.close.line01{
变换：旋转（45度）；
最高：49%；
}
.menu.close.line02、.menu.close.line03{
变换：旋转（-45度）；
最高：49%；
}

X

您是指这种实现吗？ 我刚刚在代码中添加了

v-if

和

v-else

请检查下面的代码段：

newvue({
el:“应用程序”，
数据：{
showTopMenu:false，
}
})

.top图标{
背景：#29afd1；
显示：内联块；
边界半径：500px；
利润率：10px；
位置：相对位置；
填充：80px；
光标：指针；
}
.主要项目{
宽度：150px；
高度：150像素；
位置：相对位置；
}
.线路{
位置：绝对位置；
高度：15px；
宽度：100%；
背景：白色；
边界半径：10px；
过渡：全立方贝塞尔（0.25,0.1,0.28,1.54）0.32s；
}
.line01{
最高：19%；
}
.line02{
最高：49%；
}
.line03{
最高：79%；
}
.menu.close.line01{
变换：旋转（45度）；
最高：49%；
}
.menu.close.line02、.menu.close.line03{
变换：旋转（-45度）；
最高：49%；
}

X

似乎这是一个解决方案，但我应该在

中放置什么？似乎是X或十字图标。是的，我理解，但我不知道如何设置动画。我的意思是，如果我在这个div中输入相同的代码，那么什么都不会改变。我需要通过单击来设置动画。请看这个例子：在这个例子中使用了jQuery，但我不知道如何在我的Vue模板中实现相同的行为。@OlgaB codepen.io/jenningscreate/pen/xrbxKZ中的动画完全基于CSS。jQuery只用于添加/删除那个里的类，在Vue中也可以很容易地做到这一点。我在中将示例转换为Vue。你可以试试。这里主要是关于CSS的。不是关于Javascript或Vue的。@JacobGoh非常感谢！这就是我想要的。似乎这是一个解决方案，但我应该在

中放什么？似乎是X或十字图标。是的，我理解，但我不知道如何设置动画。我的意思是，如果我在这个div中输入相同的代码，那么什么都不会改变。我需要通过单击来设置动画。请看这个例子：在这个例子中使用了jQuery，但我不知道如何在我的Vue模板中实现相同的行为。@OlgaB codepen.io/jenningscreate/pen/xrbxKZ中的动画完全基于CSS。jQuery只用于添加/删除那个里的类，在Vue中也可以很容易地做到这一点。我在中将示例转换为Vue。你可以试试。这里主要是关于CSS的。不是关于Javascript或Vue的。@JacobGoh非常感谢！这就是我想要的。

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