在不影响使用Vue.js的其他元素的情况下，打开/关闭元素类的最简单方法是什么？

我已经看到了几个如何在Vue.js中切换类的示例，如下所示：

new Vue({ el: "#app", data: { isActive: false } }); 

 .demo { width: 100px; height: 100px; background-color: red; display: inline-block; } .active { border: #000 solid 3px; } 

如果元素处于活动状态为true或false，则单击该元素切换，然后切换该类。 这很好，但是当你有更多的元素，你也可以切换和活动类打开和关闭时，这样做不起作用：

 new Vue({ el: "#app", data: { isActive: false } }); 

 .demo { width: 100px; height: 100px; background-color: red; display: inline-block; } .active { border: #000 solid 3px; } 

现在我们正在为所有这些切换相同的内容，即使我们只想切换单击的单个元素。

我知道在jQuery中这很简单：

 $('.demo').on('click', function() { $(this).toggleClass('active'); }); 

 .demo { width: 100px; height: 100px; background-color: red; display: inline-block; } .active { border: #000 solid 3px; } 

我已经看到一个示例，需要制作需要导出/导入的整个组件，以便将isActive属性范围扩展到该单独的div，但是对于这种简单的行为，这个解决方案似乎很多。 那么，像我的jQuery示例那样，在单个元素上打开/关闭.active类的最简单的解决方案是什么？

Answer 1

您可以使用java脚本执行此操作：

 new Vue({ el: "#app", methods:{ setActive(event){ event.target.classList.toggle("active"); } } }); 

 .demo { width: 100px; height: 100px; background-color: red; display: inline-block; } .active { border: #000 solid 3px; } 

Answer 2

问题是通过将父属性绑定到每个实例，它们共享父级的状态，不再代表它们自己的状态。 一个“vue-y”解决方案是通过单个属性或属性数组为每个实例创建唯一的isActive状态。

 new Vue({ el: "#app", data: { isActive1: false, isActive2: false, isActive3: false, } }); 

 .demo { width: 100px; height: 100px; background-color: red; display: inline-block; } .active { border: #000 solid 3px; } 

Answer 3

我知道vuejs指南（Class和Style Bindings）使用数据属性，但这是强制性的吗？

 new Vue({ el: "#app", data: {}, methods: { toggleMe: function (event) { event.target.classList.toggle('active'); } } }); 

 .demo { width: 100px; height: 100px; background-color: red; display: inline-block; } .active { border: #000 solid 3px; }