微语:代码适合中午敲,早晚出BUG
vue3如何使用动态class切换 Vue
这里写的是一个旋转按钮使用的是elementPlus
vue3动态class三目预算:class="isRotated ? 'rotate' : 'reverseRotate'"通过点击事件给变量取反来实现class样切换
HTML
<div class="numE" @click="numE">
<el-icon ref="numElement" color="#fff" size="30px" :class="isRotated ? 'rotate' : 'reverseRotate'">
<Expand />
</el-icon>
</div>
CSS
.rotate,
.reverseRotate {
transition: transform 0.5s ease;
}
.rotate {
transform: rotate(180deg);
}
.reverseRotate {
transform: rotate(0deg);
}
JS
import { ref } from 'vue'
let isRotated = ref(false)
let numE = () => {
isRotated.value = !isRotated.value;
}