<template><!-- 通过class绑定开启或关闭某个CSS --><view class="box" :class="{box2:true}">box1</view><view class="box" :class="{box2:isActive}">box2</view><!-- 使用三元表达式实现开启关闭CSS的效果 --><view class="box" :class="true ? 'box2' : ''">box3</view><view :style="{width:'300px', height:300 + 'px', fontSize:size + 'px', border:'1px solid red'}">Hello World</view>
</template><script setup>import {ref} from "vue";let isActive = ref(false);let size = ref(60);
</script><style lang="scss">.box{width:300px;height:300px;background-color: red;margin: 10px;}.box2{background-color: green;}
</style>