«

vue3如何使用动态class切换

时间:2023-8-2 00:51     作者:小诸葛     分类: 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;
}

动态样式 Vue3 vue3如何使用动态class切换 class

推荐阅读:


扫描二维码,在手机上阅读