フロントエンドは要素にクラス名を追加および削除します

要素にクラス名を追加/削除する方法

1. 参照を使用する

html:
<div class="body" ref="bodyRef"></div>

js代码：
let currentElement = this.$refs.bodyRef;
// 添加类名 active
// currentElement.classList.value += ' active';
currentElement.classList.add("active")
// 删除类名 active
currentElement.classList.remove("active");

2. 使用: クラス

単一の要素を例に挙げます。複数の要素がある場合は、ループし、isActive を [false, false] 形式に設定して、インデックスをバインドできます。

html: 
<div class="body" :class="{active: isActive}" @click="onClick"></div>

js:
data() {
    
    
	return {
    
    isActive: false};
},
methods: {
    
    
	onClick() {
    
    
		this.isActive = true;
	}
}