javascript - Vue 组件在不同状态下的行为如何不同？

我是 Vue 框架的新手。目前我正在做一个可以在线创建和编辑有向图的小项目。我希望某些组件可以对不同状态的事件有不同的操作。

以图节点的需求为例，如果应用程序处于编辑状态，您可以通过单击该节点来选择该节点，但如果处于删除状态，则单击它会使其消失。此外，还有一些按钮负责切换当前状态。

这是我的问题：如何以声明性、vue 风格和简洁的方式解决此类问题？

PS我的项目也是用D3.js，如果你的例子能和这个可视化框架集成就更好了。

标签： javascriptvue.js

简单的解决方案：在您的数据中有一个名为 editMode 的属性，并在您的点击处理程序中检查它：即：

<button @click="editMode?selectNode:deleteNode">Click Me</button>

其中 selectNode 和 deleteNode 是组件中的方法..