使用Vue.js在不影响其他元素的情况下切换元素的类的最简单方法是什么? [英] What is the simplest way to toggle a class on/off of an element without affecting other elements using Vue.js?

问题描述

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

I have seen several examples of how to toggle a class in Vue.js like this:

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之间进行切换，然后切换该类.很好，但是当您还有更多元素需要像这样切换和激活类时不起作用:

Clicking the element toggles if it is active true or false and you are then toggling the class. This is fine, but doesn't work when you have more elements that you also what to toggle and active class on and off like this:

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>

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

Now we are toggling the same for all of them, even though we just want to toggle the individual element that was clicked.

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

I know in jQuery this would be very simple:

$('.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类的最简单的解决方案是什么?

I have seen an example that required an entire component to be made that needed to be exported/imported just to scope the isActive property to that individual div, however that solution seems like a lot for such simple behavior. So what would be the simplest solution to toggling an .active class on/off of individual elements like my jQuery example?

推荐答案

您可以使用以下Java脚本来做到这一点:

You can do that with java script like that:

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>

或者您提到过，您可以创建一个这样的组件:

Or as you mentioned you can create a component like that:

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>

这篇关于使用Vue.js在不影响其他元素的情况下切换元素的类的最简单方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！