使用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类点击按钮时，如何显示下拉菜单，并以同样的方式，再次点击时关闭

Answer 1

使用Options 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>

演示