在不影响其他元素的情况下，用Vue.js切换一个元素的类开/关最简单的方法是什么?

What is the simplest way to toggle a class on/off of an element without affecting other elements using Vue.js?

本文关键字：元素 一个 最简单 是什么 方法 情况下 其他 影响 js Vue      更新时间：2023-09-26

我已经看到了几个如何在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类的单个元素的最简单解决方案是什么呢?

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

这种类型的唯一表示还有其他好处。在未来的日子里，你可能需要做更多的事情，而不仅仅是切换一个类的开关。现在你有了一种方法来识别活动元素，这将导致一个更可扩展的应用程序。

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

你可以用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>

我知道vuejs指南(类和样式绑定)使用数据属性，但这是强制性的吗?

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>

相关文章：