使用 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>

单击元素会切换它是否处于活动状态，然后您将切换类。这很好，但是当您有更多的元素并且您还可以像这样打开和关闭活动类时，这将不起作用：

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

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

这种类型的独特表示还有其他好处。您可能需要在未来的某个日期做更多事情，而不仅仅是打开和关闭课程。您现在有一种方法来识别活动元素，这将导致应用程序更具可扩展性。

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

Answer 2

你可以用这样的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;
}

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

<div id="app">
     <div class="demo" @click="setActive"></div>
     <div class="demo" @click="setActive"></div>
     <div class="demo" @click="setActive"></div>
</div>

或者正如你提到的，你可以创建一个这样的组件：

Vue.component('test-component',{
    template: `<div class="demo" @click="isActive = !isActive" :class="{active: isActive}"></div>`,
    data(){
        return {
            isActive: false
        }
    }
});

html:

<div id="app">
     <test-component></test-component>
     <test-component></test-component>
     <test-component></test-component>
</div>

Answer 3

我知道vuejs guide (Class and 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;
 }

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

<div id="app">
  <div class="demo" @click="toggleMe"></div>
  <div class="demo" @click="toggleMe"></div>
  <div class="demo" @click="toggleMe"></div>
</div>