使用 Vue 实例创建下拉菜单

Question

我从 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 class 的按钮时显示下拉菜单，并以同样的方式，再次点击时关闭

Answer 1

使用选项 API，您可以通过在 data 中声明它们来在 Vue 组件中创建本地反应状态：

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

在模板中使用该状态有条件地显示带有 v-if:

的元素

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

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

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

demo

使用 Vue 实例创建下拉菜单

Creating an dropdown menu using a Vue instance

javascript

vue.js

vue-component

vuejs2