[英]Creating an dropdown menu using a Vue instance
I switched from React to Vue and for me there are some incomprehensible nuances I want to create a drop-down menu, but I have some incomprehensible things related to this who is familiar with React knows that you can create a certain property with a boolean value inside a state or using hooks then when clicking on the buttons, use setState and manage with it,我从 React 切换到 Vue 对我来说有一些难以理解的细微差别我想创建一个下拉菜单,但是我有一些与此相关的难以理解的事情熟悉 React 的人都知道您可以创建具有 boolean 值的某个属性在 state 内或使用钩子然后单击按钮时,使用 setState 并使用它进行管理,
I understand that you can implement something like this in Vue JS, but I am confused by one question, how can you create a certain property in Vue JS?我知道你可以在 Vue JS 中实现这样的东西,但是我对一个问题感到困惑,你如何在 Vue JS 中创建某个属性? is it possible to instantiate by type let app = new Vue({el: '#app',});
是否可以通过类型实例化let app = new Vue({el: '#app',});
for each component?每个组件? Because I don't understand how to create a property for example showDropDown
without using new Vue ({})
?因为我不明白如何在不使用new Vue ({})
的情况下创建属性,例如showDropDown
?
My code at the moment looks like this我现在的代码看起来像这样
<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>
I think the question is clear, I want to know how, when clicking on a button with an arrow_down
class, to show a drop-down menu and, in the same way, when clicking again, close我认为这个问题很清楚,我想知道如何在单击带有arrow_down
class 的按钮时显示下拉菜单,并且以同样的方式再次单击时关闭
Using the Options API, you can create local reactive state in Vue components by declaring them in data
:使用选项 API,您可以通过在data
中声明它们来在 Vue 组件中创建本地反应式 state:
<script>
export default {
data() {
return {
showDropDown: false
}
}
}
</script>
Use that state in your template to conditionally show an element with v-if
:在模板中使用 state 有条件地显示带有v-if
的元素:
<div id="myDropdown" class="dropdown-content" v-if="showDropDown">
...
</div>
Use v-on
to add a click
-handler to the button that toggles the dropdown state:使用v-on
将click
处理程序添加到切换下拉 state 的按钮:
<button @click="showDropDown = !showDropDown">Read More</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.