我得到了两个按钮"+"，"-"加号应该显示块，减号不显示。我在vanilla-js中创建了snipplet，但我不知道如何在Vue.js中使其工作。在Vue中，我得到了一个带有+的组件，该组件使用-打开。减号应该关闭当前组件，其中-位于打开+的组件内部。
var p = document.querySelector(".plus");
var m = document.querySelector(".minus");
var div = document.querySelector("div");
p.addEventListener("click", p => {
div.style.display = "block";
});
m.addEventListener("click", m => {
div.style.display = "none";
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<button class="plus">+</button>
<button class="minus">-</button>
<div
style="height: 500px; width: 500px; background-color: blueviolet; display: none"
></div>
<script src="index.js"></script>
</body>
</html>如果我正确理解了这个问题，那么您只需要在单击-按钮时让子组件发出一个事件。父组件保持相关状态，并应在该事件发生时更新该状态。
在我的示例中，我使用了v-if而不是v-show。使用v-show将设置display: none，而v-if将完全删除子组件，包括相应的DOM节点。任何一个都适用于这样一个简单的例子。
Articles = {
template: `
<div>
<button @click="onCloseClick">- Close</button>
<p>Other stuff</p>
</div>
`,
methods: {
onCloseClick () {
this.$emit('close')
}
}
}
new Vue({
el: '#app',
components: {
Articles
},
data () {
return {
isActive: false
}
}
})<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
<button @click="isActive = true">+ Expand</button>
<Articles
v-if="isActive"
@close="isActive = false"
></Articles>
</div>这里是开始理解vueJS条件渲染的好地方。
// In your index.js file
var app = new Vue({
el: '#app',
data: {
// create a data binding to display or hide the div
displayDiv: false
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<button class="plus" @click="displayDiv = true">+</button>
<button class="minus" @click="displayDiv = false">-</button>
<!-- I added an addition button to toggle the display -->
<button class="toggle" @click="displayDiv = !displayDiv">Toggle</button>
<div
v-if="displayDiv"
style="height: 500px; width: 500px; background-color: blueviolet;"
></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="index.js"></script>
</body>
</html>或者，您可以使用动态css来动态添加或删除一个css类，该类在加载时隐藏div，并且仅在"+"按钮被按下。