使用 Vue 实例创建下拉菜单答案

【问题标题】：Creating an dropdown menu using a Vue instance使用 Vue 实例创建下拉菜单
【发布时间】：2021-06-26 23:03:59
【问题描述】：

我从 React 切换到 Vue，对我来说有一些难以理解的细微差别我想创建一个下拉菜单，但是我有一些与此相关的难以理解的事情熟悉 React 的人都知道你可以使用状态内的布尔值或使用钩子，然后在单击按钮时，使用 setState 并使用它进行管理，

我知道你可以在 Vue JS 中实现这样的东西，但我对一个问题感到困惑，你如何在 Vue JS 中创建某个属性？是否可以通过类型 let app = new Vue({el: '#app',}); 为每个组件实例化？因为我不明白如何在不使用new Vue ({}) 的情况下创建属性，例如showDropDown？

我现在的代码是这样的

<template>
    <div>
      <button class="arrow_down dropbtn">
        Read More
        <img src="arrow-down.png" alt="arrow-down">
      </button>
      <div id="myDropdown" class="dropdown-content">
        <a href="#"><li>Gagging</li></a>
        <a href="#"><li>Multiple BJs</li></a>
        <a href="#"><li>Deep Throat</li></a>
      </div>
    </div>
</template>

<style scoped>
   .dropdown-content {
     display: none;
   }
</style>

<script>
  export default {
    name: "ClosePage",
  }
</script>

我认为问题很明确，我想知道如何在单击具有arrow_down 类的按钮时显示下拉菜单，并且以同样的方式再次单击时关闭

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

使用 Options API，您可以在 Vue 组件中创建本地反应状态，方法是在 data 中声明它们：

<script>
export default {
  data() {
    return {
      showDropDown: false
    }
  }
}
</script>

在模板中使用该状态有条件地显示带有v-if 的元素：

<div id="myDropdown" class="dropdown-content" v-if="showDropDown">
 ...
</div>

使用v-on 将click-handler 添加到切换下拉状态的按钮：

<button @click="showDropDown = !showDropDown">Read More</button>

demo

【讨论】：