这里写的是一个旋转按钮使用的是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;
}

1.在vue中style行内动态样式通过 :style来开启动态属性，style={样式名:值}控制如下：

<p :style="{ backgroundColor: cor, fontSize: size }">这是一段文本</p>

export default {
  data() {
    return {
      cor: 'yellow',
      size: '30px'
    }
  }
}

2.动态Class样式通过:class="{样式名:true|false}"来开启，通过真假控制是否启用样式，如下

<p :class="{ cors: bol, font: sz }">Class动态样式</p>

export default {
  data() {
    return {,
      bol: true,
      sz: true,
    }
  }
}

.cors {
  background-color: #4ce48e;
  line-height: 2;
}

.font {
  font-size: 2em;
}

进阶用法：例如：通过点击按钮控制样式是否显示，给元素绑定点击事件，点击之前给控制样式的值，取反可控制是否开启和显示，如下

<p @click="as" :class="{ cors: bol, font: sz }">Class动态样式</p>

  methods: {
    as() {
      this.sz = !this.sz
    }
  }

或者

<p @click="sz = !sz" :class="{ cors: bol, font: sz }">Class动态样式</p>