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

Question

我已经看到了几个如何在 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;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.js"></script>

<div id="app">
    <div class="demo" @click="isActive = !isActive" :class="{active: isActive}"></div>
</div>

如果它是事件的 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;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.js"></script>

<div id="app">
    <div class="demo" @click="isActive = !isActive" :class="{active: isActive}"></div>
  <div class="demo" @click="isActive = !isActive" :class="{active: isActive}"></div>
  <div class="demo" @click="isActive = !isActive" :class="{active: isActive}"></div>
</div>

现在我们对所有元素都进行相同的切换，即使我们只想切换被单击的单个元素。

我知道在 jQuery 中这会非常简单:

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

.demo {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

.active {
  border: #000 solid 3px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="app">
  <div class="demo"></div>
  <div class="demo"></div>
  <div class="demo"></div>
</div>

我见过一个示例，该示例需要制作一个完整的组件，需要导出/导入只是为了将 isActive 属性的范围限定到那个单独的 div，但是对于这种简单的行为来说，这个解决方案似乎很多。那么像我的 jQuery 示例那样打开/关闭单个元素的 .active 类的最简单解决方案是什么？

Answer 1

问题在于，通过将父属性绑定(bind)到每个实例，它们共享父级的状态，不再代表它们自己的状态。一个“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;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.js"></script>

<div id="app">
    <div class="demo" @click.self="isActive1 = !isActive1" :class="{active: isActive1}"></div>
  <div class="demo" @click.self="isActive2 = !isActive2" :class="{active: isActive2}"></div>
  <div class="demo" @click.self="isActive3 = !isActive3" :class="{active: isActive3}"></div>
</div>

这种独特的表现形式还有其他好处。您可能需要在将来做更多的事情，而不仅仅是打开和关闭类(class)。您现在有一种方法来识别事件元素，这将导致应用程序更具可扩展性。

请记住，此时将您的行为封装到一个组件中会更有意义，这样您就可以在隔离范围内重用它。