在不影响使用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

问题在于，通过将父属性绑定到每个实例，它们共享父级的状态，不再代表自己的状态。一个“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)使用了数据属性，但这是强制性的吗？

＆＃13;

＆＃13;

ContentProvider

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;