案例
<!--
Class样式绑定
-->
<template>
<div :class="{'class1': class1}">class1</div> <br>
<div :class="class2">class2</div>
<button @click="changeStyle">点击改变样式</button><br>
</template>
<script>
import { reactive, ref } from '@vue/reactivity';
export default {
setup(){
let class1 = ref(true);
let class2 = reactive({
class1: true,
class2: true
})
let changeStyle = ()=>{
class1.value = !class1.value
}
return {
class2,
class1,
changeStyle
}
}
}
</script>
<style>
.class1 {
border: 1px solid red;
}
.class2 {
font-size: 20px;
color: red;
}
</style>
